[Select] Required in select component not working

[rogefm]

I'm using the required to validate the form using HTML validation. All inputs do a good job, but the select component with required = true lets the form submit even without having an option selected.

[kevinmitch14]

Working for me, it's best to create a reproduction of the issue.

[rogefm]

Sorry, I was creating a reproduction to share https://codesandbox.io/p/sandbox/yy8ttr

[rogefm]

Working for me, it's best to create a reproduction of the issue.

If you can share the code I can look for the differences.

[kevinmitch14]

It's because you are setting the value to "". It's selecting option1 as a result and not triggered the native required.

const [value, setValue] = React.useState("");

For example if you use const [value, setValue] = React.useState(undefined);, the required message will show up

Why it is selected option1, when "" is passed as value, I'm not sure.

[rogefm]

Cool, you are right. But is weird, that most of the input from radix doesn't allow the value be undefined or null, but the select yes 🥲 Thx for the help. Still, I'm not sure if it is not a bug, but ok if you want to close the issue.

[kevinmitch14]

I'm not too sure why having value={""} would result in "option1" being the active value though. Maybe it's a bug, I'm not too sure. If you think it is, maybe best to have a look at radix/primitives. PS. I'm not a maintainer!