downshift-js/downshift

[useSelect] Selecting item with spacebar in firefox reopens the menu

Open

#1197 aperta il 18 nov 2020

Vedi su GitHub
 (5 commenti) (0 reazioni) (0 assegnatari)JavaScript (980 fork)batch import
bughelp wantedneeds investigation

Metriche repository

Star
 (11.761 star)
Metriche merge PR
 (Merge medio 4g 9h) (7 PR mergiate in 30 g)

Descrizione

  • downshift version: 6.0.6
  • firefox version: 82.0.3

Relevant code or config

Error present in reference implementation: https://www.downshift-js.com/use-select

What you did:

With firefox, open a menu and select an item with the spacebar key

What happened:

The item was selected, but the menu was reopened. Closely inspecting the result of onStateChange it is revelead that on key down the __menu_keydown_space_button__ is emitted, and on key up the __togglebutton_click__ is emitted.

Error is not present in chrome.

Reproduction repository:

Problem description:

Suggested solution:

Guida contributor

Direzione di ricerca
Indaga sulla gestione degli eventi per il tasto spazio nell'hook useSelect, concentrandoti sulla differenza tra Firefox e Chrome. Esamina i gestori onKeyDown e onClick, in particolare come interagiscono. Il problema menziona che in Firefox, keydown emette ' menu keydown space button ' e keyup emette ' togglebutton click ', causando la riapertura del menu. Controlla il codice sorgente nel repository downshift, probabilmente nel file useSelect.js, per vedere se manca un event.preventDefault() o se c'è una gestione impropria della propagazione degli eventi. Controlla anche se l'evento 'onKeyUp' deve essere soppresso. L'implementazione di riferimento su https://www.downshift js.com/use select può essere utilizzata per la riproduzione.
Tech stack
javascriptreact
Dominio
frontendaccessibility
Tipo issue
Bug
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
3
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
1-3 ore
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
Nuova
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
Abbastanza chiara
Prerequisiti
React basicskeyboard events understanding
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
65