downshift-js/downshift

Inconsistent state change when browser tab is switched in `useSelect`

Open

#1157 aperta il 19 ago 2020

Vedi su GitHub
 (5 commenti) (0 reazioni) (0 assegnatari)JavaScript (980 fork)batch import
help 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.5
  • node version: latest
  • npm (or yarn) version: latest

Relevant code or config Simple implementation of a Select component using useSelect hook. Behaviour is visible in your example implementation

What you did:

  • Open the Select dropdown
  • Switch back and forth with another browser tab

What happened:

The Select dropdown stays open / collapses inconsistently, meaning sometimes it stays open and sometimes is closes

Reproduction repository:

https://codesandbox.io/s/useselect-usage-forked-cikep

Problem description:

Inconsistent state change in useSelect when switching browser tabs

Suggested solution:

I don't think there is a clear industry standard for this behaviour. As far as I tested useCombobox does collapse on tab switch, so maybe that's will be good here too. If not too difficult, could create a prop to manipulate it.

Guida contributor

Direzione di ricerca
Analizza l'implementazione dell'hook useSelect nel codice sorgente di downshift (probabilmente in src/hooks/useSelect.js). Osserva come useCombobox gestisce il cambio di scheda (si comprime) e replica quel comportamento. Considera l'uso dell'evento document.visibilitychange per chiudere il menu a discesa quando la scheda perde visibilità. I file rilevanti si trovano nel repository downshift, in particolare l'hook useSelect. Controlla anche la riproduzione nel codesandbox.
Tech stack
javascriptreact
Dominio
frontend
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.
Datata
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
Chiara
Prerequisiti
ReactdownshiftJavaScriptbrowser tab visibility
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
60