[Bug]: Select component ignores "selected" property on page load

[thekevinhunt]

Package

@carbon/web-components

Browser

Chrome

Package version

v2.18.0

React version

No response

Description

When using the cds-select component and including "selected" on a cds-select-item element, the option is not selected on page load. Interestingly, if you modify the DOM in the developer toolbar to add "selected" AFTER the page initially loads, it properly selects the element.

Interestingly, the "disabled" property doesn't have the same problem on cds-select-item elements.

Reproduction/example

https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/select?file=index.html

Steps to reproduce

1. Use the existing stackblitz build provided in the docs (https://web-components.carbondesignsystem.com/?path=/docs/components-select--overview)
2. Simply add "selected" as a property to any cds-select-item in the index.html file.
3. The page will automatically reload, but the option won't be selected
4. Edit the live HTML directly in the web developer tools and the option will get selected fine

Suggested Severity

Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.

Application/PAL

IBM Industry Compliance PIMS Portal

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[ariellalgilmore]

Hi @thekevinhunt did you try setting the value on cds-select like the following:

    <cds-select
      helper-text="Optional helper text"
      label-text="Select"
      placeholder="Optional placeholder text"
      value="cloudFoundry" <---------
    >
      <cds-select-item-group label="Category 1">
        <cds-select-item value="all">Option 1</cds-select-item>
        <cds-select-item value="cloudFoundry">Option 2</cds-select-item>
      </cds-select-item-group>
      <cds-select-item-group label="Category 2">
        <cds-select-item value="staging">Option 3</cds-select-item>
        <cds-select-item value="dea">Option 4</cds-select-item>
        <cds-select-item value="router">Option 5</cds-select-item>
      </cds-select-item-group>
    </cds-select>

On page load i see the select now starting with "Option 2"

[thekevinhunt]

@ariellalgilmore ugh, I missed that value setting completely... but to my credit, that's not intuitive at all when you're used to the normal HTML select, and the misdirect of the documentation listing a "selected" setting for cds-select-item, combined with the "value" setting not being documented very clearly.

It's working like I expect, knowing this now.

If nothing else, I suggest removing the "selected" setting documentation since it apparently doesn't do anything, and making the "value" setting documentation not that it's aligned with what people would expect "selected" to do.

[ariellalgilmore]

Thanks for the feedback! Will reference this, so it gets updated in the parity issue #17931

[makafsal]

@ariellalgilmore I agree with @thekevinhunt because, from the HTML perspective, our intuition would be to use the selected attribute instead of the value attribute. So, we can make both available to users to choose between value and selected at their convenience.

Value	Selected	Placeholder	RESULT
✅	❎	❎	Value
❎	✅	❎	Selected
❎	❎	✅	Placeholder
✅	✅	✅	Value
✅	✅	❎	Value
❎	✅	✅	Selected
✅	❎	✅	Value