input-time-zone can lose selection on change

[nwhittaker]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

Given a time-zone input this is updated programmatically: If the input's messages, mode, and/or referenceDate props are set at the same time the value prop is, the matching combobox-item (if there is one) is not selected or loses its selection.

Expected Behavior

The matching combobox-item, if any, is selected or remains selected.

Reproduction Sample

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

Reproduction Steps

1. Visit the repro. sample
2. If needed, change the offset passed to the setTimeZone() function to be different from your own.
3. Click the Set time zone button and observe the <calcite-input-time-zone> input's value is cleared instead of matching the offset established in step 2. If it appears to work, try clicking the button a few times and/or clicking the input itself to force a repaint.
4. Optionally comment out the line of code that sets the input's referenceDate to see the expected behavior.

Reproduction Version

2.13.2

Relevant Info

I believe the issue stems from a race condition in the component's handleTimeZoneItemPropsChange method:

calcite-design-system/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx

Lines 145 to 146 in e38e297

	this.updateTimeZoneItems();
	this.updateTimeZoneSelection();

The time-zone selection is not waiting for the new list of time-zones. As a result it's finding itself in the old list of time zones which means it never matches a time-zone item in the renderItems() method.

I suspect making the handleTimeZoneItemPropsChange method asynchronous and awaiting the call to updateTimeZoneItems() would be enough to clear up the issue:

-  handleTimeZoneItemPropsChange(): void {
+  async handleTimeZoneItemPropsChange(): Promise<void> {
    if (!this.timeZoneItems) {
      return;
    }

-    this.updateTimeZoneItems();
+    await this.updateTimeZoneItems();
    this.updateTimeZoneSelection();
  }

Regression?

2.12.2

Priority impact

impact - p1 - need for current milestone

Impact

I'm readily encountering this error in a component that constructs <calcite-input-time-zone> inputs in JSX following a data-down/action-up architecture. As a result, the component's rendering engine is setting/updating props on the inputs frequently and in batches. In this less contrived scenario, the inputs' are unusable as their values are almost always cleared after the user makes a selection.

A workaround may be to set the messages, mode, and/or referenceDate props separately from the value prop. However, this adds a degree of complexity that's difficult to generalize.

Calcite package

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

Esri team

ArcGIS Field Apps