According to the documentation for the Select
component’s value
prop:
When not set, the value will default to an empty string, which will show the
placeholder
text as the “selected value”
However, I have a Select
component in a full-page customer account UI extension, am passing an undefined
value
to it, and seeing that it doesn’t display the placeholder at all but instead shows the label of the first option that was passed in.
I’m using 2025.4.0
of both @shopify/ui-extensions
and @shopify/ui-extensions-react
. The following code provides a minimal reproduction of the issue:
import { Select } from '@shopify/ui-extensions-react/customer-account';
const SelectPlaceholderBug = () => (
<Select
label="Choose a value"
placeholder="This should be shown"
options={[{ label: 'This is shown instead', value: 'should-not-show' }]}
value={undefined}
/>
);