Tooltip in Table closes automatically for keyboard users

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

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

  • #10363 de @jsmitrah — cerrado sin fusionar

Evaluación

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

Línea de trabajo

Comienza con la reproducción vinculada de StackBlitz e inspecciona el comportamiento de useOverlayPosition en Tooltip junto con la ruta de foco de Table. Compara la reentrada con Shift+Tab con la navegación con Arrow Down y, después, verifica que un trigger enfocado mantiene abierto su tooltip mientras el desplazamiento normal sigue cerrándolo.

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

Descripción

Provide a general summary of the issue here

Tooltips within a Table component gets automatically closed immediately for keyboard users when moving focus back into the grid via Shift+Tab and in certain cases when navigating between cells.

🤔 Expected Behavior?

Tooltips should stay open when the trigger is focused

😯 Current Behavior

Tooltip is opened and then immediately closes again.

I think this is caused by scroll events. The Tooltip automatically closes on scroll (in useOverlayPosition) which is correct for regular scroll events. Tabbing back into the grid also results in scroll events (because the browser initially moves focus to the last focusable element which scrolls, then RAC moves focus and restores the scroll position), but they should be ignored somehow.

💁 Possible Solution

No response

🔦 Context

We're building our own Table component (because of different requirements) but plan to use the Tooltip component to show truncated content (for keyboard + mouse users, not needed for SR users and touch users can still resize the column / open the detail page). I stumbled across this problem in our own implementation but it's reproducible with the RAC table component.

🖥️ Steps to Reproduce

Open https://stackblitz.com/edit/goy7bobs?file=index.html (and make sure the preview window is wide enough so you can see the columns in the table)

Issue 1:

  1. Tab into the grid and move focus to the "..." menu button => Tooltip appears
  2. Press Tab (moves focus out if grid)
  3. Press Shift + Tab (moves focus back into grid)

Issue 2:

  1. Tab into the grid and move focus to the "..." menu button => Tooltip appears
  2. Press Arrow Down multiple times until new rows appear in the viewport
Version

[email protected]

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Windows 11

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

Lenguaje dominante
TypeScript
Estrellas
16k
Forks
1.6k
Merge medio
2 d 19 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.