A <Select.Item /> must have a value prop that is not an empty string

[ramonmalcolm10]

I am using a <Select> component with shadcn/ui. In version 1.x.x I could create a select item with an empty string value to allow user the option to unselect. However since version 2.0.0, it throw an error whenever I pass an empty value and complain that the key is duplicated if no value is pass.

[thepedroferrari]

Same here, the current design disallows empty strings at runtime but allows them at compile-time in TypeScript, creating a mismatch and undermining type safety. The lack of compile-time errors for what becomes a runtime issue is problematic and counterintuitive.

There is no reasonable way to determine a string that is not empty, so the type you currently defined as string is correct IMO. If there were compile-time errors I believe this would be an okay change, but allowing a dev to make a mistake they may only realise during run-time is the reason many adopted TypeScript in order to avoid.

[michaelschufi]

I also am struggling with making a generic select component for my project's filters.
I want to distinguish between a string that's not empty and null/undefined/empty string. A string that's not empty should mark a value, while the others are there to define a missing value. At least in the context of an HTML select.

I propose to allow a select item with an empty string. The placeholder can still be displayed if this item is selected, no?

Even the HTML Standard is giving an item with an empty value as an example to have a placeholder:
https://html.spec.whatwg.org/multipage/form-elements.html#the-select-element

(scroll down a bit)

[benoitgrelard]

This is because the Select value can be set to an empty string to clear the selection and show the placeholder.

[michaelschufi]

Hi @benoitgrelard

Which makes sense, but why is it just blocked? Couldn't the select conditionally show the placeholder if no empty string option is available?

There are lots of dropdowns out there that have an empty string option to reset a filter of some kind. The good thing about it, is that no additional UX element is needed to clear the value of a filter dropdown. It's right there with the other options.
To make this behaviour possible, the workaround is to choose a select value that hopefully never is used as an option, intercept the value change and change it "manually" to "". Which is just hacky and could error if the special select value is used by chance.

[benoitgrelard]

This is the behaviour we had before #2174. Users asked us to change that behaviour so it would be possible to reset the select and have the placeholder show. That's what #2174 enabled.

Unfortunately I don't believe what you are asking would be possible, due to how controlled/uncontrolled components work in React.
Can you demonstrate in a sandbox what you would expect the behaviour to be, using a native select?

[michaelschufi]

Sure, I'll try to set up a sandbox example. 👍 It may take a moment...