adobe/react-spectrum

combobox open state breaks for initially-empty async searches

Open

#2333 aperta il 14 set 2021

Vedi su GitHub
 (8 commenti) (0 reazioni) (0 assegnatari)TypeScript (1500 fork)auto 404
bughelp wanted

Metriche repository

Star
 (15.634 star)
Metriche merge PR
 (Metriche PR in attesa)

Descrizione

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

Guida contributor