adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
12.12k stars 1.06k forks source link

Not getting no items view in plain combobox component #6615

Closed NarendraKuruva closed 3 days ago

NarendraKuruva commented 6 days ago

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 Peek 2024-06-25 18-42

Whereas it is being shown in async list combobox example. Below gif shows no items text being displaying in async combobox example Peek 2024-06-25 18-44

πŸ€” 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 commented 5 days ago

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.

https://github.com/adobe/react-spectrum/blob/2cd8f0b509cd9a1d93322dd75fc1306e5f0e217f/packages/%40react-spectrum/combobox/src/ComboBox.tsx#L198-L202

LFDanLu commented 4 days ago

In addition to the code section @yihuiliao provided, https://github.com/adobe/react-spectrum/blob/f8d63a6464273c2d525b5ea949b7a7ccf2c7a187/packages/%40react-spectrum/combobox/src/ComboBox.tsx#L107 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 https://github.com/adobe/react-spectrum/issues/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 commented 3 days ago

Got it Thank you @LFDanLu @yihuiliao