Not getting no items view in plain combobox component

[NarendraKuruva]

Provide a general summary of the issue here

In Combobox no items text is not displayed when no matching options for the search text match.

Below video shows no items text not displaying in combobox

Whereas it is being shown in async list combobox example.
Below gif shows no items text being displaying in async combobox example

🤔 Expected Behavior?

No Items view/ no data text should be displayed when there are no items that match the search text

😯 Current Behavior

Not getting no items text when no matching options for the search text match.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

1. Clone repo and start server
2. Go to combobox story
3. search for an item that doesn't exist in the list
4. No Items view will not be displayed
5. But when we see in asynchronous loading example
6. we will be able to see no items text
   (or)
   Can be seen directly in the documentation
   Asynchronous loading example - No items text is displayed
   Normal combobox - No items text is not displayed

Version

Not using react spectrum. Using components by directly copying

What browsers are you seeing the problem on?

Chrome

If other, please specify.

Using specific nested packages

What operating system are you using?

Ubuntu 22.04.4 LTS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[yihuiliao]

This looks like it was intentional so it is behaving as expected but perhaps we can consider opening it up so that it will display "No Result" even when not async. However, I think it might require some additional changes since we'd have to keep the Popover open to display this result when currently we close it when there are no matches. I'm not too familiar with this component though so not sure if that's something we'd like or not, perhaps the team will have other thoughts.

react-spectrum/packages/@react-spectrum/combobox/src/ComboBox.tsx

Lines 198 to 202 in 2cd8f0b

	renderEmptyState={() => isAsync && (
	<span className={classNames(comboboxStyles, 'no-results')}>
	{loadingState === 'loading' ? stringFormatter.format('loading') : stringFormatter.format('noResults')}
	</span>
	)} />

[LFDanLu]

In addition to the code section @yihuiliao provided,

react-spectrum/packages/@react-spectrum/combobox/src/ComboBox.tsx

Line 107 in f8d63a6

allowsEmptyCollection: isAsync

would need to be set to true in all cases not just async to enable this behavior. For some more background, this behavior was originally added to the async specifically because we encountered iffy behavior when the user's filter text went from "doesn't match any results" to "matching results" after the async fetch finished. Ideally, we imagined that the menu would simply reopen if new results matching your filter text were loaded, but #5234 has some more details about the difficulties around this.

I don't recall any issues with making the "No items" view appear in the React Spectrum combobox but we'd have to check with design to ok that change on the RSP side. I believe you can replicate this behavior with the React Aria Components Combobox since it accepts the "allowsEmptyCollection" props and would recommend you switch to using that instead if at all possible so you have more control over your api and don't have to untangle yourself from the Spectrum specific behavior

[NarendraKuruva]

Got it
Thank you @LFDanLu @yihuiliao