[select] Controlled components should not change internal values when change handler is missing

[nizhnyk]

Bug report

Current behavior

When a state variable is passed to the value prop of the Base UI Select component, the Select menu can still be opened, and a different option can be selected without using the onValueChange function. This behavior is unexpected for a controlled component since changes to its value should only occur through the onValueChange handler.

Expected behavior

The Select component should function as a controlled component. Changes to the selected value should only be possible when handled via the onValueChange function. The value prop should strictly determine the displayed selected value.

Reproducible example

Link to a CodeSandbox

Steps to reproduce:

1. Pass a state variable to the value prop of the Select component. (Already done)
2. Do not handle the onValueChange function. (Already commented out)
3. Open the Select menu and try selecting a different option.
4. Notice that the selected value changes without using onValueChange.

Base UI version

v1.0.0-alpha.5

Which browser are you using?

Chrome, Safari

Which OS are you using?

Mac OS

Additional context

This behavior contradicts the expected behavior of controlled components. It might cause inconsistencies in state management when using Select in forms or other UI workflows.

[mj12albert]

Changes to the selected value should only be possible when handled via the onValueChange function. The value prop should strictly determine the displayed selected value.

This makes sense, Radix's select does this (sandbox), and React will throw an error for controlled inputs that are missing the value change handler.

Though I wonder in the Radix example when the value just doesn't change and there's no console warning/error, if it may be immediately obvious enough what is going on (in the context of a real project and not just a minimal example)

Currently I think all our form controls do this in controlled mode (e.g. NumberField, Slider)

What do you think? @michaldudak @atomiks @colmtuite

[atomiks]

Aren't there use cases for a controlled component where you want to change the value externally via setX(value) and still have it update (or maybe this behavior is just limited to Select?)

[michaldudak]

IMO if a component is controlled, it should strictly behave like it. I can see a point in having imperative access to setting a value, though. Could we use the action prop for it?

[mj12albert]

We decided that to make all "controllable" components match the React expectation:

1. does not change internal/displayed values when a change handler is missing in controlled mode
2. additionally throw an error when that happens