fix: mark placeholder option as selected in react SfSelect

[lsliwaradioluz]

Related issue

Closes ES-1423

Scope of work

React

Added the selected attribute to the option used as the native's <select /> element placeholder since this is the option we want to use in case there is no value set initially. See example usage of an <SfSelect /> element featuring months of the year (01-12).

Before

After

Keep in mind the change does not interfere with our ability to set the initial value for the select element. If we do, the placeholder option will not appear as selected.

Vue

Added the internalValue ref which tracks the current value of the native <select /> element and prevents losing it in between re-renders. The erroneous behaviour can be observed in the documentation's examples - take a look at the top 3 select elements. They have no v-model applied and the selected option is not preserved due to an immediate rerender:

Screen.Recording.2025-01-17.at.15.47.23.mov

Checklist

• Self code-reviewed
• Changes documented
• Semantic HTML
• SSR-friendly
• Caching friendly
• a11y for WCAG 2.0 AA
• examples created
• blocks created
• cypress tests created

[changeset-bot]

🦋 Changeset detected

Latest commit: 7e91c2d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@storefront-ui/vue	Patch
@storefront-ui/react	Patch
@storefront-ui/nuxt	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Szymon-dziewonski]

I'm not really understand issue here, if you don't have value on selected, hidden value should be set as default placeholder codepen example that is default select HTML behaviour

[Szymon-dziewonski]

this wont work for sure when you will change model-value from outside, meaning

1. when select is changed emit should be done
2. when model is changed outside should reflect in select

Select component as any framework UI components should not keep its state, that why you should have model value outside your component and component itself is just UI representation.

[lsliwaradioluz]

Select component as any framework UI components should not keep its state, that why you should have model value outside your component and component itself is just UI representation.

I thoroughly agree. Unfortunately with Vue it does not work as expected (see the documentation example above) unless we use the v-model on that component in the parent component.

Therefore, if we agree that this component should not have any internal state (which I am fine with), we should mark modelValue as required to avoid such bugs. And this will be a breaking change.

[lsliwaradioluz]

WDYT @Szymon-dziewonski?

[Szymon-dziewonski]

I would suggest using proxy with internal as it is done in SfInput

const internalState = ref<string | number>();
const selectModel= computed({
  get: () => modelValue.value ||  internalState.value,
  set: (value) => {
    emit('update:modelValue', value);
    internalState.value = value;
  },
});

Or do as you said required prop, but I see that all form control component does not have modelValue prop set as required.

So to be consistent, this component can have internal state as it is already in input (

Sorry my bad, I thought that we haven't got any component like that in SFUI.

[lsliwaradioluz]

Thanks @Szymon-dziewonski, I've applied your suggestion

[Szymon-dziewonski]

This is breaking change as when user will add their option in slot with selected option, then user selected option wont be marked as selected because hidden placeholder is selected

[lsliwaradioluz]

I am not sure - I believe the last option marked as selected will always take precedence.

Having said that, it goes against the Standard. I have to think of another solution.

[lsliwaradioluz]

@Szymon-dziewonski thank you for finding the best possible solution. Turned out using the disabled and hidden attrs simultaneously was causing this issue. I've corrected that here.