Update popover position on scroll and field resize to autocomplete/search TokenField examples

Abierto
  • ¿Algo no está bien?
#10,670 2 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
48/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
frontend

Línea de trabajo

Reproduce the autocomplete and search TokenField examples at the linked TokenField documentation pages, then inspect their useOverlayPosition usage and the proposed useUpdatePositionOnScroll entry point. Done means the popover stays attached during page scrolling and field resizing, and closes when clicking outside it or into another input.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

TokenField
🙋 Documentation Request

The popover doesn't remain positioned above/below the TokenField input in the autocomplete and search TokenField examples. The popover also can't easily be closed other than clicking an item in the popover menu (eg: clicking outside popover or clicking into another input does not close it).

Not sure if this is just a flawed/incomplete docs example or an actual bug.

https://react-aria.adobe.com/TokenField#search
https://react-aria.adobe.com/TokenField#autocomplete

Current Behavior
https://github.com/user-attachments/assets/b60de6cb-efb5-4484-8b29-16b9fb522b0e

Expected Behavior
https://github.com/user-attachments/assets/26f4bbf6-d59d-4be6-9930-72dc8c1ab9e2

Possible Fix

Setting shouldUpdatePosition: true in useOverlayPosition doesn't work.

This works as a temporary solution:

/**
 * Calls `updatePosition` whenever any scroll container on the page scrolls while `isEnabled` is true, so an overlay stays
 * attached to its trigger. Scrolling inside the overlay itself is ignored, since that doesn’t move the trigger.
 */
export function useUpdatePositionOnScroll(overlayRef: React.RefObject<Element | null>, updatePosition: () => void, isEnabled: boolean) {
  useEffect(() => {
    if (!isEnabled) return
    function handleScroll(event: Event) {
      // Scrolling the overlay’s own contents doesn’t move the trigger.
      if (event.target instanceof Node && overlayRef.current?.contains(event.target)) return
      updatePosition()
    }
    // Scroll events don’t bubble, so capture them from every scroll container.
    window.addEventListener('scroll', handleScroll, { capture: true, passive: true })
    return () => window.removeEventListener('scroll', handleScroll, { capture: true })
  }, [isEnabled, updatePosition, overlayRef])
}

Environment
MacOS 15.7.4 (24G517), Google Chrome 154.0.8037.58 (arm64), react-aria: 3.52.1, react-aria-components 1.21.1

🧢 Your Company/Team

No response

Lenguaje dominante
TypeScript
Estrellas
16k
Forks
1.6k
Merge medio
2 d 17 h
PR fusionados (30 d)
41

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de adobe/react-spectrum

Todos los issues de adobe/react-spectrum

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.