Setting combobox value prop emits calciteComboboxChange event

[nwhittaker]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

Setting the value prop on a <calcite-combobox> component programmatically results in calciteComboboxItemChange and calciteComboboxChange events being emitted.

Expected Behavior

Setting the value prop on a <calcite-combobox> component programmatically does not result in calciteComboboxItemChange and calciteComboboxChange events being emitted.

Reproduction Sample

https://codepen.io/nwhittaker-esri/pen/KKYabYR

Reproduction Steps

1. Visit the code sample and open the console.
2. Click the Select random and see event handler messages appear.

Alternative

1. Inspect any <calcite-combobox-item> element in devtools.
2. Manually toggle the element's selected attribute and see event handler message appears.

Reproduction Version

3.6.0

Relevant Info

No response

Regression?

No response

Priority impact

p2 - want for current milestone

Impact

Typically programmatic changes to an element do not result in events being fired. They're usually only fired in response to some sort of UI interaction from the user.

One difficulty with firing these events programmatically is they're firing during the component's update lifecycle. Specifically, in Stencil, we want to reuse the same combobox element with a different set of options and selected value. During the update, the calciteComboboxChange event is firing (sometimes while the combobox still has an empty value). As a result, our listeners are ending up with an incorrect value and think the component has been dirtied by a user input.

I have a codepen that better simulates the update lifecycle issue:

1. Click the Recycle combobox button to simulate a full update to the component's value and items.
2. During the update, notice the calciteComboboxChange is fired and the Selected value output is updated with the combobox's value at that point in time which is empty.
3. After the update, click the Output value button to update the output with the combobox's current value which has been quietly set to "A".

---

A workaround for this particular scenario is to set selected on the new combobox items and let the combobox component derive the value. However this is not a maintainable approach and doesn't solve the problem of listeners thinking the combobox has been dirtied.

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

[anveshmekala]

Hi @nwhittaker , issue is resolved in latest version of calcite.

Codepen https://codepen.io/anvesh-mekala/pen/dPbepaJ

[github-actions]

Installed and assigned for verification.

[geospatialem]

Hi @nwhittaker , issue is resolved in latest version of calcite.

Codepen https://codepen.io/anvesh-mekala/pen/dPbepaJ

Verified with Anvesh's Codepen and Nate's updated Codepen in 3.0.0-next.108: https://codepen.io/geospatialem/pen/raBqbEQ