[BUG] - Select: Keys "" passed to "selectedKeys" are not present in the collection.

[Marcin-HammerHeads]

NextUI Version

2.2.9

Describe the bug

"Select" component throws multiple warnings in the console in the example using onChange prop and doesn't set the placeholder.

Warning message:

Select: Keys "" passed to "selectedKeys" are not present in the collection.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Open Select component code snippet (Controlled using onChange) in the CodeSandbox
2. Open console in CodeSandbox

Expected behavior

Placeholder in the select component won't display, multiple warnings in the console will show up.

Screenshots or Videos

Operating System Version

macOS Sonoma 14.2.1

Browser

Chrome

[kuri-sun]

Hi @Marcin-HammerHeads, Could you provide me with the code after you modified the Controlled code, please?

[Marcin-HammerHeads]

I did not modify the code, the issue arises immediately after opening the second example in the 'Controlled' section ("using onChange"). This issue is present even in the docs page:

[kuri-sun]

@Marcin-HammerHeads Thanks for the reply. Now I saw it! Thank you for creating a PR @sudongyuer !

[cmedina-dev]

Hi all,

While sudongyuer's PR is being reviewed, the following can be used as a workaround. Add the following as an item to your Select component:

<SelectItem
  key=""
  classNames={{
    base: 'hidden',
  }}
>
Enter your placeholder text here
</SelectItem>

Since the Select component's selectedKeys is searching for an empty key ('') on the initial render (I suspect because of the initial state being set with const [exampleSelect, setExampleSelect] = useState('')

This workaround adds a hidden SelectItem component to your Select component which allows the component to continue functioning normally while not affecting the legitimate items in your Select.

[Corepex]

Hi all,

While sudongyuer's PR is being reviewed, the following can be used as a workaround. Add the following as an item to your Select component:

<SelectItem
  key=""
  classNames={{
    base: 'hidden',
  }}
>
Enter your placeholder text here
</SelectItem>

Since the Select component's selectedKeys is searching for an empty key ('') on the initial render (I suspect because of the initial state being set with const [exampleSelect, setExampleSelect] = useState('')

This workaround adds a hidden SelectItem component to your Select component which allows the component to continue functioning normally while not affecting the legitimate items in your Select.

This worked for me. No console output so far.

Besides that, the defaultSelectedKeys doesn't react to a state change (if you for example load the items from a API).

Did i miss something?