[BUG] - Select not working correctly with numbers

[jegork]

NextUI Version

2.3.6

Describe the bug

Select component seems to accept numbers, and given this type definitions

export type Key = string | number;

export type Selection = 'all' | Set<Key>;

onSelectionChange?: (keys: Selection) => any,

it indeed seems possible. However, when you provide numbers as items of Select, in onSelectionChange, keys is always Set<string>

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

<Select
          label="Test"
          items={[{ label: "2024", value: 2024 }]}
          onSelectionChange={(v) => {
            console.log(v);
          }}
        >
          {(item) => (
            <SelectItem key={item.value} value={item.value}>
              {item.label}
            </SelectItem>
          )}
        </Select>

when selecting a item, log statement prints {'2024'} (but should {2024})

Expected behavior

value in onSelectionChange should be Set<number>

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

[linear[bot]]

ENG-775 [BUG] - Select not working correctly with numbers

[jegork]

Additionally, when you provide string[] to selectedKeys, e.g. [2020, 2021], then it cannot find these keys, therefore the Select dropdown does not show ticks next to selected items.

[ryo-manba]

Thanks for the issue!

This issue stems from React converting the key to a string.

Note that if you do specify a custom key on each Item using the key prop, React will convert the provided key to a string. As a result, all the collection component's key-related event handlers and props (e.g. onSelectionChange, selectedKey(s)) will expect and return strings.

See: https://react-spectrum.adobe.com/react-stately/collections.html#unique-keys

While it can be resolved by assigning an id to items as shown below, but the current situation requires a key, so some adjustments need to be made. I'm currently working on this fix.

let [years, setYears] = useState([
  {id: 1, value: 2024},
  {id: 2, value: 2025},
  {id: 3, value: 2026}
]);

<Select items={years}>
  {item => <SelectItem>{item.value}</SelectItem>}
</Select>