adobe/react-spectrum

combobox open state breaks for initially-empty async searches

Open

#2,333 opened on Sep 14, 2021

View on GitHub
 (8 comments) (0 reactions) (0 assignees)TypeScript (1,500 forks)auto 404
bughelp wanted

Repository metrics

Stars
 (15,634 stars)
PR merge metrics
 (PR metrics pending)

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.

Contributor guide