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

[vladislavsz]

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

[snowystinger]

Hey, thanks for the issue. First, a quick observation, that Select + Autocomplete does not work for keyboard only users. Please see example https://react-spectrum.adobe.com/react-aria/examples/searchable-select.html for how to implement that.

We likely need to adjust some logic here https://github.com/adobe/react-spectrum/blob/main/packages/%40react-stately/select/src/useSelectState.ts#L73
@LFDanLu have you been looking at this with your S2 async support work?

[LFDanLu]

The S2 async support work a bit adjacent to this in that it will add async loading support to the ListBox. To support opening the Select when it doesn't have items we'd have to add something to the hook like allowEmptyCollection in the ComboBox. High level, I'd imagine we would do the following:

• Add an option to useAsyncList to make it so it doesn't automatically fetch the first page of items
• Add a loading sentinel to the ListBox. If we add the sentinel to the collection, then we might not have to add allowEmptyCollection to the hook since the collection isn't actually empty in that case
• the async load would then be triggered once the dropdown opens because it is "in view"

[uncvrd]

Just wanted to add my +1 for supporting allowEmptyCollection for the Select component to account for when async items are loaded when querying with the autocomplete input within the select dropdown but not available until making that query.

To circumvent this I have a fallback query that will return results upon page load and then if the input in the autocomplete is cleared, I add back the fallback query so that the user can open up the popover again.

const [query, setQuery] = useState(FALLBACK_QUERY)

// lower down in my wrapped select component

onQuery={(query) => {
                if (query === "") {
                    setQuery(FALLBACK_QUERY)
                } else {
                    setQuery(query)
                }
            }}

That would be super helpful, thank you!

Video of how this works with the fallback

Screen.Recording.2025-04-30.at.12.54.05.PM.mov