Invisible <s-select value

[bkspace]

Hey team,

Facing a bit of an odd issue where select ‘values’ are not being shown. In this example, we’re only using <s-select value="val"> - and not using the selected or defaultSelected props on the <s-option>. But, we’ve replicated using those properties also.

It’s also worth noting that this intermittent, which leads me to believe this is potentially a SSR issue.

Has anyone seen something similar? Any recommendation on things to try?

EDIT: It also does look like the ‘value’ property is computed correctly

[bakura10]

I’ve experienced this as well, and the issue was completely random. Sometimes it was showing the value, sometimes not. I suppose you’re working on React 19 ? React 19 and Polaris web components have ton of weird bugs, especially when using SSR.

[bkspace]

@bakura10

SSR

We see this specific one on both React 18 and 19, and across browsers (Chromium, Safari, Firefox).

Good to hear it’s not just us, thank you!

[Axel]

I’m seeing the same issue with Polaris Web Components, even with a very basic setup:

<s-select class="my_field" label="Label" value="{{ $value_set_from_backend }}">
    <s-option value="0" @if($value_set_from_backend == 0) selected @endif>Value 0</s-option>
    <s-option value="1" @if($value_set_from_backend == 1) selected @endif>Value 1</s-option>
</s-select>

One thing I noticed is that, when I inspect the generated HTML, the <span class="value"></span> is also empty, even though it should contain the default value.

The issue seems completely random. I have a settings page with dozens of s-select components, and on page load there is usually one that ends up empty like this, though sometimes none of them are affected.

[Anthony_Frehner]

I believe we have a fix for this internally – letting it soak for a bit before pushing to the CDN