Tooltip in Table closes automatically for keyboard users

Aperta
  • Qualcosa non va?
#10,333 4 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

  • #10363 di @jsmitrah — chiusa senza merge

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
65/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
react, typescript
Ambito
accessibility, frontend

Direzione di ricerca

Inizia con la riproduzione StackBlitz collegata e analizza il comportamento di useOverlayPosition di Tooltip insieme al percorso di focus di Table. Confronta il rientro con Shift+Tab con la navigazione tramite Arrow Down, quindi verifica che un trigger con il focus mantenga aperto il proprio tooltip mentre lo scorrimento ordinario continui a chiuderlo.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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

Lingua principale
TypeScript
Stelle
16k
Fork
1.6k
Merge medio
2g 19h
PR unite (30g)
41

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di adobe/react-spectrum

Tutte le issue di adobe/react-spectrum

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.