adobe/react-spectrum

combobox open state breaks for initially-empty async searches

Open

#2.333 aberto em 14 de set. de 2021

Ver no GitHub
 (8 comments) (0 reactions) (0 assignees)TypeScript (1.500 forks)auto 404
bughelp wanted

Métricas do repositório

Stars
 (15.634 stars)
Métricas de merge de PR
 (Métricas PR pendentes)

Description

🐛 Bug Report

useComboBoxState doesn't set isOpen properly when dealing with initially empty async collections.

The existing async example uses a search API where there's a non-empty set of search results for the initial empty string search. However, if an empty string search returns an empty [] array set of results the current useComboBoxState logic fails to open when you type the first character into the input. (It will properly open only when typing twice, or when backspacking it will flash open then closed.)

https://github.com/adobe/react-spectrum/blob/058ce77164ac2b5fa9332634253d395d9c382ac4/packages/%40react-stately/combobox/src/useComboBoxState.ts#L154-L164

This is because the check will fail the first time when the input is empty at filteredCollection.size > 0. And then it will fail again when there is a single character in the input because of the async-ness it will take two render passes to get results, and on the second pass inputValue === lastValue.current.

💁 Possible Solution

I think it should likely check to see if items has changed (and it has items) and if it isn't open then to open? Not exactly sure.

💻 Code Sample

https://codesandbox.io/s/divine-wave-5r995?file=/src/App.tsx:912-927

This is a modified version of the existing async search example. The only difference is that this line…

items: json.results,

…is changed to…

items: filterText === "" ? [] : json.results,

…to simulate an API that returns an empty array for empty string searches.

Guia do colaborador