React Select changes value to '' on render

[AbdUlHamedMaree]

Bug report

Current Behavior

React Select triggeres the onValueChange event on render and the value is an empty string ''

Expected behavior

It shouldn't change the value by it's own

Reproducible example

CodeSandbox

Suggested solution

• not wrapping the select in form element
• rendering the select even with no data
• not setting data on render

Additional context

to trigger the issue you should have this flow:

• the select is placed inside a form
• you should load data from somewhere and the select should not be rendered while loading the data
• when data is loaded you will show the select and set the value of it
  if one of those conditions doesn't match, the issue will not appear

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-select	2.2.6
React	n/a	>=17
Browser	Edge	141.0.3537.57
Assistive tech	NextJs and CRA	15.5.2and 3.3.0
Node	n/a	22
npm/yarn/pnpm	npm	10.9.3
Operating System	Windows	11 Pro

[tsarapke]

Hey @AbdUlHamedMaree ,

I am encountering the same issue when using the Select component with Form. After conducting some research, I found that the problem is caused by the following behavior:

Let’s say we have a Select component with two options: Foo and Bar. Our goal is to render it with the default value set to Foo (assuming we maintain the selected value with an outer useState initialized to Foo).

Here’s what happens during the rendering process:

• On the first render, Select renders the SelectBubbleInput component, which, under the hood, renders a native select element.
• The SelectBubbleInput includes a useEffect, where it checks if the current value is different from prevValue. If they are different, it updates the native select element’s value and dispatches a change event. In this case, prevValue is null during the first render, while value is Foo.

However, there is a key issue:

• During the first render, the nativeOptionsSet is EMPTY. This nativeOptionsSet represents the options rendered inside the select element, and it is determined during the first render pass via setState. As a result, the nativeOptionsSet will only be populated (i.e., NOT EMPTY) on the second render pass.
• Why is this important? The nativeOptionsSet is responsible for rendering the native <option> tags inside the select element. If the nativeOptionsSet is empty during the first render, it becomes impossible to set a default value of Foo. Instead of dispatching the correct value (Foo), the native select dispatches an empty string (""). This behavior resets the outer state, leaving the Select component empty instead of preselected.

Here’s a visual representation of the problem:

The issue can be resolved with the following fix in radix/react-select component:

The root cause lies in attempting to set a value (Foo) in the native select while the corresponding options (nativeOptionsSet) have not yet been rendered on the first pass. By ensuring that options are fully rendered before setting the value, the issue can be resolved.

[tsarapke]

Here is workaround for people who are interested in:

1. Install patch-package - npm install patch-package --save-dev
2. In package.json add in scripts section add "postinstall": "patch-package"
3. Go to /node_modules/@radix-ui/react-select/dist/index.js
4. Find this row
   
5. Replace isFormControl with (isFormControl && nativeOptionsSet.size > 0) so it will look like this:
6. BE AWARE, you have to do the same thing in similar file /node_modules/@radix-ui/react-select/dist/index.mjs
7. Run npm run patch-package @radix-ui/react-select
8. It will create a patches folder with a patch:
   
9. That's it.

That's not ideal. But for these who have no time to wait when it will be fixes - it should be fine as temp solution.