Async Combobox not rendering initial result

[binaryartifex]

Provide a general summary of the issue here

combobox does not render a list of results from an initially empty or undefined list given a search query. however each subsequent query change will render a list.

🤔 Expected Behavior?

Combobox popover should render a list of results from an initially empty or undefined async response in the first instance.

😯 Current Behavior

At present, the current example provided by the docs for an async combobox does an initial fetch on page render. great for small lists, not so great for searching for an amazon product or returning an address from google places api. I added a small predicate in the useAsyncList list callback to only search when the filterText length is greater than 0. this takes care of the initial fetch however it appears the popover is now no longer synced with the state of the combobox because when there IS a list of results in the first instance, popover does not render a list. however with each new request after the first one that has results, it will flash the initial list before quickly showing the 'current' list.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

Example can be found here
Its taken straight from the docs example under the RAC combobox async docs (an actual async RAC combobox code example would be nice though). all ive added is a console log to track the items passed to combobox and a predicate to prevent initial render.

1. open link provided above, observe console log to see full initial list returned on page load.
2. uncomment first line in useAsyncList 'load' callback to prevent initial fetch
3. type in letter 'L' (lowercase) and watch for console output of returned list with no initial popover being rendered
4. type in letter 'u' and observe the 'initial' results list immediately render until its replaced by the new list

Version

3.29.0 (react-aria)

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Windows 11

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[oreqizer]

this exact same thing also happens when manually specifying list of items, both via the items prop on ComboBox, or listing out Item children manually down in ItemBox

[ldvilchez]

I was dealing with this issue last night, with a static list of items the popover opens up inmediality after you type, with an async list the behaviour is not consistent.

[binaryartifex]

@snowystinger sorry for the poke mate but any chance of someone having a look at this?

[snowystinger]

No worries, sorry it slipped between the cracks.

As a workaround, you could pass allowsEmptyCollection: true to your combobox and render an empty state.

It's a bit weird that it's behind. I think we could fix it if we added a condition on which to open the combobox here

react-spectrum/packages/@react-stately/combobox/src/useComboBoxState.ts

Line 182 in f600fdf

if (

The comment at the beginning of the effect seems pretty clear what cases this covers. We'll need to make sure this doesn't cause it to open at some unexpected times.

if (
      isFocused &&
      (filteredCollection.size > 0 || allowsEmptyCollection) &&
      !triggerState.isOpen &&
      (inputValue !== lastValue &&
      menuTrigger !== 'manual') ||
      (filteredCollection !== lastCollection) // new one
    )

It'd be great to get an async RAC example in. We're open to contributions and it'd help cover this scenario. Would you be willing to contribute a PR?

I was dealing with this issue last night, with a static list of items the popover opens up inmediality after you type, with an async list the behaviour is not consistent.

can you clarify "not consistent"?

[ldvilchez]

I was dealing with this issue last night, with a static list of items the popover opens up inmediality after you type, with an async list the behaviour is not consistent.

can you clarify "not consistent"?

I'm using https://www.npmjs.com/package/use-places-Autocomplete the hook has a debounce prop and as soon as I removed the debounce it worked like a charm, at the cost of firing off a request for every keystroke which is obviously not ideal.

So I'm just setting the debounce to a number around 150ms which seems to result in a better experience but obviously not ideal either.

[LFDanLu]

We can experiment with always updating the internal isOpen state in useComboBoxState and add a condition in the returned isOpen that checks if collection is empty or not as well.

[binaryartifex]

@LFDanLu appreciate you guys are winding down after this last release, ive tried to get the RAC combobox straight from the asyncList example to behave more inline with the autocomplete pattern reminiscent of say a google search but again, it doesn't handle initial empty lists well at all, id go as far to say the fetch url used in the async example is a bit of a false positive as well because without any input it initially returns a full known list of items - not so good if your hitting an endpoint that returns 1000 items instead of 10 in the first instance before any characters are typed. Are you guys gonna be looking into a standalone Autocomplete RAC? in any case a solid example of using combobox in this manner or a searchbox/listbox example in the docs with all the combobox bells and whistles would be bloody awesome...

[LFDanLu]

Our upcoming near term priority will be implementing a treeview but I will double check if autocomplete will be picked up soon. Theoretically changing the useComboBoxState hook to update an internal isOpen always should help with the behavior you were describing in the original issue and then we could update the example in the docs so that it doesn't fetch any items upfront.

EDIT: We will see if we can pick this up in our next sprint after the break.

[LFDanLu]

Just chiming in to let you know that we've tried the fix I described above and it resulted in some additional complexities that were difficult to resolve. The team will hopefully continue digging into this in the coming sprint.

[LFDanLu]

We'll be picking up ComboBox work as a part of a larger project effort soon, stay tuned. The team still needs to decide the form of the fix for this specific issue though, it may be something with the internal ComboBox hook logic or it may be exposing allowsEmptyCollection as suggested here.