Controlled empty select element submits first value by default

[jeffreysnell]

Bug report

Using a controlled Select element with a placeholder in a form causes the form to submit the first item as the selected value, even if the user hasn’t made a selection.

Current Behavior

When submitting a form with a controlled Select component, the first item in the Select is submitted as the value, even if no selection has been made. See screenshot below:

I also attempted to use a placeholder item to give the Select a valid default which resulted in an 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.

Expected behavior

• If Select is not required: The form should submit an empty value ("") when no selection is made.
• If Select is required: The form should throw an invalid event when attempting to submit without a selection.

Reproducible example

Select example

Suggested solution

Ideally, if the user makes no selection, the Select value should be "". However, to avoid a breaking change for current users, an optional flag to control this behavior could be provided.

An alternate solution would be to allow a placeholder item to be inserted in the first element of the select and to select that item by default.

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-select	2.1.2
React	n/a	18
Browser	Chrome	latest
Assistive tech	None
Node	n/a
npm/yarn	npm
Operating System	OSX