Select component inside a form acts indeterminately

[mhsattarian]

Bug report

Current Behavior

If a controlled <Select /> component is used inside a form, after changing the value passed to it, the onValueChange method will get called with an empty string value ('' ).

CleanShot.2024-09-23.at.16.47.18.mp4

in the video above, I'm using the Shadcn/ui select component, note that the component is inside a form and I have a console.log statement inside the onChange passed to the onValueChanged prop. on the initial render, the controlled value is undefined, after setting this value the onChange function is called with a value of an empty string.

Expected behavior

I believe that the onChange method should only be called when a user interaction changes the value of Select and it's like so when the Select component is not used inside a form.

Reproducible example

https://stackblitz.com/edit/vitejs-vite-gua7y3?file=src%2FApp.tsx

Suggested solution

I guess this behavior is somewhat related to supporting browser auto-complete and I don't really know now how to fix this without interfering with that but I probably would prevent this onChange from happening if the Select component is being used as a controlled input.

Your environment

Software	Name(s)	Version
Radix Package(s)	Select	2.1.1
React	n/a	18
Browser	chrome	128
Assistive tech
Node	n/a
npm/yarn
Operating System

[eessadrati]

same here, any solution?
the problem happens only when i use Select inside a form, if i use a simple div instead it works perfectyl

[mhsattarian]

any solution?

what I did in my onChange function was to check if options are not loaded or the value passed to it was an empty string I would return early. not the best solution but works fine.