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 (980 forks)batch import
help wantedneeds investigation

Métriques du dépôt

Stars
 (11 761 stars)
Métriques de merge PR
 (Merge moyen 6j 9h) (5 PRs mergées en 30 j)

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

Direction de recherche
Inspectez les gestionnaires d'événements dans useSelect qui répondent aux changements de visibilité de l'onglet du navigateur et comparez les avec useCombobox pour comprendre l'incohérence.
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 heures
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
Active
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
Claire
Prérequis
ReactJavaScript
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
75