adobe / adobe/react-spectrum

Autocomplete: ListBox doesn't render async loaded options when inside a Select

Open
#7,940 4 comments 3 reactions 0 assignees View on GitHub
enhancement
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide a general summary of the issue here

When using `Select`, `ListBox`, and `Autocomplete`, together with async loading (e.g. `useAsyncList`):

1. `Popover` fails to open when no items have been provided (you can uncomment `initialFilterText` in the provided sandbox to see this).
2. `ListBox` doesn't update when the "items" prop changes. Adjusting the "dependencies" prop doesn't help.

### 🤔 Expected Behavior?

1. When providing an empty list of "items" to `ListBox` inside a `Autocomplete` - the `Select` should still allow the `Popover` to open.
2. `ListBox` should render the new "items" after fetching them asynchronously.

### 😯 Current Behavior

Described in the general summary of the issue.

### 💁 Possible Solution

_No response_

### 🔦 Context

My use case is having no "items" at first, and only loading them in after the user has typed something in. I think this is a pretty popular scenario where, instead of returning an unrelated list of "items" on the first load (or hitting the API unncessarily without the user's interaction with the field), we require an explicit input/interaction from the user.

### 🖥️ Steps to Reproduce

https://codesandbox.io/p/sandbox/small-sea-jst6zm

### Version

react-aria-components@1.7.1

### What browsers are you seeing the problem on?

Chrome

### If other, please specify.

_No response_

### What operating system are you using?

macOS 15.3.1

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

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.