downshift-js/downshift

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

Open

#1 157 ouverte le 19 août 2020

Voir sur GitHub
 (5 commentaires) (0 réactions) (0 assignés)JavaScript (11 761 stars) (980 forks)batch import
help wantedneeds investigation

Description

  • 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.

Guide contributeur

Stack technique
javascriptreact
Domaine
frontend
Type d'issue
bug
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
3
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
1-3 hours
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
stale
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
clear
Prérequis
ReactdownshiftJavaScriptbrowser tab visibility
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
60
Direction de recherche
Investigate the useSelect hook implementation in the downshift source code (likely in src/hooks/useSelect.js). Look at how useCombobox handles tab switch (it collapses) and replicate that behavior. Consider using the document.visibilitychange event to close the dropdown when the tab loses visibility. The relevant files are in the downshift repository, specifically the useSelect hook. Also check the codesandbox for reproduction.