Unable to set combobox's initial value prop

[nwhittaker]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

When rendering a <calcite-combobox value="…"> with a defined value, the corresponding <calcite-combobox-item> element is not initially selected.

Expected Behavior

At minimum, if value is initially defined, I'm expecting the <calcite-combobox-item> child with the same value to be initially selected.

For other cases, the suggested expected behavior is to match how the <calcite-select> element behaves:

• If value is initially defined but a non-corresponding <calcite-combobox-item> child is marked as selected, the value prop wins and the selected prop is moved to the corresponding child.

  Pre-load	Post-load
  <calcite-combobox value="2"> <calcite-combobox-item text-label="One" value="1" /> <calcite-combobox-item text-label="Two" value="2" /> <calcite-combobox-item selected text-label="Three" value="3" /> </calcite-combobox>	<calcite-combobox value="2"> <calcite-combobox-item text-label="One" value="1" /> <calcite-combobox-item selected text-label="Two" value="2" /> <calcite-combobox-item text-label="Three" value="3" /> </calcite-combobox>

• If value does not match any child values, value is reset to an empty string and no child is selected.
• If value does not match any child values and a child is marked as selected, value is reset to an empty string and the selected prop is removed from the child.
• If value is an empty string, no child is automatically selected.
• If value is an empty string and a child is marked as selected, the selected prop is removed from the child.

Reproduction Sample

https://developers.arcgis.com/calcite-design-system/components/combobox/

Reproduction Steps

1. Visit the combobox component's doc page.
2. Set the combobox's value prop (e.g. to "Agriculture") and see the matching item does not become selected.
3. For comparison, visit the select component's doc page and set its value (e.g. to "rivers") and see the matching item becomes selected.

Reproduction Version

2.9.0

Relevant Info

Setting the value prop programmatically after the component is loaded does behave as expected.

Regression?

No response

Priority impact

impact - p2 - want for an upcoming milestone

Impact

A workaround is to set the child's initial selected prop instead.

Calcite package

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

Esri team

ArcGIS Field Apps

[nwhittaker]

For visibility, this issue also impacts the <calcite-input-time-zone> element following similar repro. steps.

EDIT: Or maybe not -- not reproducing reliably for me…