[select] Placeholder value visible despite setting defaultValue or value in Select

[amal-biju]

Bug report

Current behavior

When using the Base UI Select component, the placeholder text is still visible even though a defaultValue or value is already set. On initial render, the placeholder remains visible until the trigger is clicked, at which point it updates to display the selected value. This creates a confusing experience for users.

Expected behavior

The selected value (either via defaultValue or value) should be visible on initial render. The placeholder should only be shown if no value is selected.

Base UI version

1.0.0-beta.0

Which browser are you using?

Chrome

Which OS are you using?

Windows 11

Additional context

Tested with both controlled and uncontrolled versions of the Select component. In both cases, placeholder rendering seems to override the intended selected value until user interaction occurs.

[alpjor]

I found this behavior only started in Beta.0. Alpha.8 didn't do this

[atomiks]

The Select.Value API is changing in beta.1, which is going out today/tomorrow: https://master--base-ui.netlify.app/react/components/select#formatting-the-value.

By default, the raw value will be rendered in Select.Value instead of a label - to print the label, you can pass an items prop to Select.Root, or create a lookup map to retrieve the label from the current value using a function children.

---

After some perf improvements to Select in beta.0, we realized the placeholder API was confusing and no longer worked well including after hydration. In React, it's not possible to grab the value of Select.ItemText during SSR, and so there was a flash in alpha.8 as well if you didn't specify placeholder to match the the default value's label. With the new API in beta.1, it works correctly during SSR and after hydration while retaining the performance improvements. Some details in here: #2011