search

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.76k stars 1.09k forks source link

ListBox with selectionMode="multiple" not working inside Combobox component #6570

Open tordsta opened 3 months ago

tordsta commented 3 months ago

Provide a general summary of the issue here

I think the core of the issue is that the behavior of ListBox should be consistent when placed inside different wrappers such as ComboBox. This is also relevant for ListBox inside the Select component. I know the docs specify that multiple selections is not possible for the Select component, but it is still weird and confusing that one can have a ListBox with the selectionMode="multiple" inside a Select component. Furthermore I can not find the same single select restriction in the documentation for ComboBox or ListBox, leading me to believe this is a bug.

🤔 Expected Behavior?

ListBox with selectionMode="multiple" does not work inside a Combobox.

😯 Current Behavior

ListBox with selectionMode="multiple" does not work inside a ComboBox.

💁 Possible Solution

Some alternatives:

  1. Make the ListBox with selectionMode="multiple" work inside ComboBox. I guess the value would need to be an array of keys instead of a single key to make it work.
  2. If this is intended behavior, update the documentation of ComboBox and ListBox. Specify that ComboBox is single select. On the ListBox page add a "Gotcha"/warning about selectionMode="multiple" not working when placed inside Select and ComboBox.

🔦 Context

Filter with multiple options selected. Selection of multiple floors a tenant is on. Etc. just dropdown multi select in general.

🖥️ Steps to Reproduce

https://codesandbox.io/p/sandbox/awesome-dawn-n8p4pn

Version

1.2.1

What browsers are you seeing the problem on?

Other

If other, please specify.

Arc

What operating system are you using?

macOS Sonoma 14.1

🧢 Your Company/Team

Propely

🕷 Tracking Issue

No response

tordsta commented 3 months ago

Also another possible solution is to separate out the ListBox into two different concepts. One that is ListBox with ListBoxItems, with a selectionMode="multiple". And another one that is OptionBox (or whatever) and OptionBoxItem witch is only single select. And then using OptionBox in ComboBox and Select, while ListBox is standalone.

snowystinger commented 3 months ago

Related https://github.com/adobe/react-spectrum/issues/2140