Select.Item value not assignable to empty string

[simovicaleksa]

Bug report

Select is hostaging a user into having a select value once selected. There is currently no easy (or intuitive) way for resetting the uncontrolled state of select.

Resetting the select value is a core feature of native select, and resorting to dirty hacks such as using the key prop is not ideal DX and can lead to unexpected behavior.

Current Behavior

Not able to set Select.Item value to empty string for resetting purposes.

Expected behavior

Be able to somehow reset the choice in uncontrolled <Select /> component, in a non-hacky way.

Reproducible example

Take a look at the example of this Select component, used for filtering search by fruit. If you'd wanted to filter only fruits with apples, then changed your mind and wanted to see all the fruits, you'd have to reload the page, or reset the entire form (losing other filters which you wished to stay) instead of just removing the value you don't wish to filter by.

This is annoying user experience, and a core feature of Select component that's missing!

<Select {...props}>
  <Select.Trigger>
    <Select.Value placeholder="Choose fruit" />
  </Select.Trigger>
  <Select.Content>
     <Select.Group>
      <Select.Item value="" className="opacity-50">Choose a fruit</Select.Item>
      <Select.Item value="apple">Apple</Select.Item>
      <Select.Item value="banana">Banana</Select.Item>
      <Select.Item value="orange">Orange</Select.Item>
    </Select.Group>
  </Select.Content>
</Select>

The code above is simple and clean, but currently throws the following error:

Error: A <Select.Item /> must have a value prop that is not an empty string. This is because the Select value can be set to an empty string to clear the selection and show the placeholder.

Suggested solution

1. Be able to set Select.Item vlaue to an empty string <Select.Item value="" />, or
2. Have new primitive Select.Clear to reset the value of <Select />