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.21k stars 1.07k forks source link

[RAC] Select options with same value are not shown #6670

Open ryo-manba opened 1 week ago

ryo-manba commented 1 week ago

Provide a general summary of the issue here

When using Select with the same id for options, they are not displayed. This is problematic because in forms, the id is reflected as the value. For example, both Italy and Vatican have the country code 39.

🤔 Expected Behavior?

The same value can be specified for options.

😯 Current Behavior

When trying to specify the same value for options, they are not displayed.

💁 Possible Solution

Instead of using selectedKey for the input value in HiddenSelect, it might be better to use the item's textValue. This may diverge from the intended use of textValue but could resolve the issue.

https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/select/src/HiddenSelect.tsx#L156

🔦 Context

Handling duplicate values in select options, such as country codes, is a valid use case and should be supported.

🖥️ Steps to Reproduce

  1. Access the following link https://stackblitz.com/~/github.com/ryo-manba/select-same-value?file=src/app/page.tsx
  2. Italy and Vatican share the same country code, so only the latter is displayed.

Version

react-aria-components: 1.2.1

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS Sonoma

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

snowystinger commented 1 week ago

I think it's better practice to separate the two and use a map to determine the country code instead. That way you know which country the user is actually trying to reach.

Can bring up with the team when everyone is back from shutdown since it technically works for native select's.

ryo-manba commented 1 week ago

Thanks you for your suggestion. That approach sounds good. However, making it work similar to a native select might enhance usability even further. It would be great to use the value directly in ListboxItem, but since it accepts an object, some adjustments will be necessary.