adobe / adobe/react-spectrum

combobox open state breaks for initially-empty async searches

Open
#2,333 8 comments 0 reactions 0 assignees View on GitHub
bug help wanted
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

# 🐛 Bug Report

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

The [existing async example](https://codesandbox.io/s/dreamy-burnell-3i2jy?file=/src/App.tsx) 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…

```tsx
items: json.results,
```

…is changed to…

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

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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.