downshift-js/downshift

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

Open

#1.157 geöffnet am 19. Aug. 2020

Auf GitHub ansehen
 (5 Kommentare) (0 Reaktionen) (0 zugewiesene Personen)JavaScript (980 Forks)batch import
help wantedneeds investigation

Repository-Metriken

Stars
 (11.761 Stars)
PR-Merge-Metriken
 (Durchschn. Merge 6T 9h) (5 gemergte PRs in 30 T)

Beschreibung

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

Contributor Guide

Research-Richtung
Überprüfen Sie die Ereignisbehandlungsroutinen in useSelect, die auf Änderungen der Browser Tab Sichtbarkeit reagieren, und vergleichen Sie sie mit useCombobox, um die Inkonsistenz zu verstehen.
Tech Stack
javascriptreact
Domain
frontend
Issue Type
Fehler
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
3
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
1-3 Stunden
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
Aktiv
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
Klar
Voraussetzungen
ReactJavaScript
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
75