Clicking label does not toggle switch sometimes

[nwhittaker]

Actual Behavior

If a label and switch, paired via the for attribute, are rendered dynamically, clicking the label immediately after it renders does not toggle the switch.

Waiting a few seconds after rendering the label, for the first time, does seem to toggle the switch correctly. However subsequent re-rendering of the elements seems to sever the connection completely.

Expected Behavior

Clicking the label always toggles the switch as long as it's not in a disabled state.

Reproduction Sample

https://ember-twiddle.com/d384379a8ad315d95edc61186a54abe9

Reproduction Steps

1. Visit the sample
2. Click the Toggle labels button
3. Click the Calcite label label
4. If the switch toggles, click the Toggle labels button again and then jump back to step 2.

Reproduction Version

1.0.7

Relevant Info

Possibly related to, or an extension of, Esri/calcite-components#3761.

Regression?

No response

Priority impact

p3 - not time sensitive

Impact

A workaround is to specify the label's for and the input's id attributes statically rather than dynamically. However, this only works well for one-off components where there's little risk of specifying duplicate identifiers.

Esri team

ArcGIS Field Apps

[nwhittaker]

Another workaround, if using a label within another Stencil component where the input's id is generated:

<calcite-label for={this.inputId} ref={label => label.setAttribute('for', label.for)}>{this.labelText}</calcite-label>

[nwhittaker]

Possibly supplanted by https://github.com/Esri/calcite-design-system/issues/7364.

[geospatialem]

Will execute the effort of https://github.com/Esri/calcite-design-system/issues/8126 with form component ElementInternals in November to determine if the above is fixed, or if additional efforts are needed targeted for late 2024.