downshift-js/downshift

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

Open

#1.157 aberto em 19 de ago. de 2020

Ver no GitHub
 (5 comments) (0 reactions) (0 assignees)JavaScript (980 forks)batch import
help wantedneeds investigation

Métricas do repositório

Stars
 (11.761 stars)
Métricas de merge de PR
 (Mesclagem média 6d 9h) (5 fundiu PRs em 30d)

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.

Guia do colaborador

Direção de pesquisa
Inspecione os manipuladores de eventos em useSelect que respondem às mudanças de visibilidade da guia do navegador e compare com useCombobox para entender a inconsistência.
Pilha de tecnologia
javascriptreact
Domain
frontend
Tipo Issue
Bug
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
3
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
1-3 horas
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
Ativo
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
Claro
Prerequisites
ReactJavaScript
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
75