Setting the selected attribute on multiple chips in a single selection group on initial page load fails to work correctly and consistently

[eriklharper]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

Including the selected attribute on more than one calcite-chip element in a selection-mode="single" group will sometimes highlight the first one, sometimes the second one, and sometimes the last one. Setting multiple selected chips in a single-persist selection group results in all 3 chips appearing selected.

 <calcite-chip-group label="demo-group-label" selection-mode="single" id="single-programmatic">
    <calcite-chip selected kind="inverse" value="calcite chip">Research</calcite-chip>
    <calcite-chip kind="inverse" value="calcite chip">Findings</calcite-chip>
    <calcite-chip selected kind="inverse" value="calcite chip">Hypothesis</calcite-chip>
    <calcite-chip id="chip-to-change-single" kind="inverse" value="calcite chip">Supplies</calcite-chip>
    <calcite-chip kind="inverse" value="calcite chip">Employees</calcite-chip>
  </calcite-chip-group>

Chip.Group.selects.different.chips.on.page.load.randomly.mov

Expected Behavior

According to the HTML spec for radio buttons, the last selected element in DOM order should be the selected element, similar to segmented-control.

Reproduction Sample

https://codepen.io/eriklharper/pen/OJGKqqZ

Reproduction Steps

1. Open the Codepen Reproduction Sample
2. Refresh the page over and over to observe that the last chip in the DOM order with the selected attribute in the HTML is not always the one that appears selected in the first chip group.
3. Also observe the 2nd chip group shows all 3 chips selected when its supposed to just be the last one.

Reproduction Version

2.8.0

Relevant Info

No response

Regression?

No response

Priority impact

p3 - want for upcoming milestone

Impact

No response

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

Calcite (dev)