[Select] Value of `<select>` element is never empty when controlling a `Select` within a form

[YarnSphere]

Bug report

Current Behaviour

When a Radix Select with a controlled value is within a <form> and is empty (value=""), the value of its hidden <select> element is not the empty string, and is instead that of the first item. I.e., when accessing formElement.selectName.value (where formElement is the <form> element and selectName is the name of the <select>), we receive the value of the first select item rather than an empty string.

This happens because the generated <select> has no <option> with an empty value. As such, it defaults to the value of the first <option>.

Expected behaviour

The <select> element should have an empty value when the Radix select is empty.

Reproducible example

In the example below, you can see that alerting the value of the <select> when the Radix Select is empty displays “apple”, which is the value of the first item of the select:

CodeSandbox example

Suggested solution

Simplest solution: when building the <select> element, Radix should add an <option> with no value.

However, this issue is slightly related to #2706. Another solution which would also solve #2706 would be for Radix to follow the behaviour of native selects by defaulting to the first item when value="", unless an explicit (possibly hidden) item with value="" is provided.

Your environment

Software	Name(s)	Version
Radix Package(s)	radix-ui	1.3.4
React	n/a	>=17
Browser	Chromium, Firefox	135, 138