S-select not functioning as described

Polaris
1

Issue 1:
Select field defaulting to the first option when no value is passed.

Expected outcome:

With no value supplied the field should be empty.

Actual outcome:
Defaults to first option in list.

image
image1980×248 1.96 KB

Code to replicate:

<s-page>
    <form>
            <s-select label="test" id="test">
                <s-option value="1">1</s-option>
                <s-option value="2">2</s-option>
                <s-option value="3">3</s-option>
            </s-select>
        </form>
    </s-page>

Issue 2:
Select should display the corresponding option when a value is supplied.

Expected outcome:
When a value is passed to the s-select tag, the specified value should be selected from the list on page load.

Actual outcome:
Select defaults to the first option in the list.

image
image1980×248 20 KB

Code to replicate

<s-page>
    <form>
        <s-select label="test" id="test" value="2">
            <s-option value="1">1</s-option>
            <s-option value="2">2</s-option>
            <s-option value="3">3</s-option>
       </s-select>
    </form>
</s-page>
2

This is expected - that’s also the behavior you get when using a native Select element. See <select>: The HTML Select element - HTML | MDN as a reference

This is a shortcoming in our documentation; the value property on Select works as expected when you do

const selectElement = document.querySelector('s-select')
selectElement.value // shows current value

However, there is not a value attribute for select. Instead, nearly like a native Select element in HTML, you would put selected on an s-option instead:

<s-page>
    <form>
        <s-select label="test" id="test">
            <s-option value="1">1</s-option>
            <s-option value="2" selected>2</s-option>
            <s-option value="3">3</s-option>
       </s-select>
    </form>
</s-page>