fix(label): fix issue where clicking on a wrapped labelable component would not update its value correctly

src/components/calcite-checkbox/calcite-checkbox.tsx

@@ -4,6 +4,7 @@ import {
   Event,
   EventEmitter,
   h,
+  Host,
   Listen,
   Method,
   Prop,
@@ -145,10 +146,6 @@ export class CalciteCheckbox implements LabelableComponent {
   };
 
   private clickHandler = (): void => {
-    if (this.labelEl) {
-      return;
-    }
-
     this.toggle();
   };
 
@@ -257,12 +254,14 @@ export class CalciteCheckbox implements LabelableComponent {
 
   render(): VNode {
     return (
-      <div class={{ focused: this.focused }} onClick={this.clickHandler}>
-        <svg class="check-svg" viewBox="0 0 16 16">
-          <path d={this.getPath()} />
-        </svg>
-        <slot />
-      </div>
+      <Host onClick={this.clickHandler}>
+        <div class={{ focused: this.focused, test: true }}>
+          <svg class="check-svg" viewBox="0 0 16 16">
+            <path d={this.getPath()} />
+          </svg>
+          <slot />
+        </div>
+      </Host>
     );
   }
 }

src/components/calcite-label/calcite-label.tsx

@@ -57,16 +57,20 @@ export class CalciteLabel {
   /**
    * @internal
    */
-  @Event({ bubbles: false }) calciteInternalLabelClick: EventEmitter<void>;
+  @Event({ bubbles: false }) calciteInternalLabelClick: EventEmitter<{
+    sourceEvent: MouseEvent;
+  }>;
 
   //--------------------------------------------------------------------------
   //
   //  Private Methods
   //
   //--------------------------------------------------------------------------
 
-  labelClickHandler = (): void => {
-    this.calciteInternalLabelClick.emit();
+  labelClickHandler = (event: MouseEvent): void => {
+    this.calciteInternalLabelClick.emit({
+      sourceEvent: event
+    });
   };
 
   //--------------------------------------------------------------------------

src/components/calcite-radio-button/calcite-radio-button.tsx

@@ -182,26 +182,24 @@ export class CalciteRadioButton implements LabelableComponent {
   };
 
   private clickHandler = (): void => {
-    if (this.labelEl) {
-      return;
-    }
-
     this.toggle();
   };
 
   onLabelClick = (event: CustomEvent): void => {
     if (!this.disabled && !this.hidden) {
       this.uncheckOtherRadioButtonsInGroup();
       const label = event.currentTarget as HTMLCalciteLabelElement;
-      const firstButton = this.rootNode.querySelector<HTMLCalciteRadioButtonElement>(
-        label.for
-          ? `calcite-radio-button[id="${label.for}"]`
-          : `calcite-radio-button[name="${this.name}"]`
-      );
-
-      if (firstButton) {
-        firstButton.checked = true;
-        firstButton.focused = true;
+      const radioButton = label.for
+        ? this.rootNode.querySelector<HTMLCalciteRadioButtonElement>(
+            `calcite-radio-button[id="${label.for}"]`
+          )
+        : label.querySelector<HTMLCalciteRadioButtonElement>(
+            `calcite-radio-button[name="${this.name}"]`
+          );
+
+      if (radioButton) {
+        radioButton.checked = true;
+        radioButton.focused = true;
       }
 
       this.calciteRadioButtonChange.emit();

src/components/calcite-switch/calcite-switch.tsx

@@ -141,10 +141,6 @@ export class CalciteSwitch implements LabelableComponent {
   }
 
   private clickHandler = (): void => {
-    if (this.labelEl) {
-      return;
-    }
-
     this.toggle();
   };
 

src/tests/commonTests.ts

@@ -267,7 +267,15 @@ async function assertLabelable({
   }
 
   if (propertyToToggle) {
-    expect(await component.getProperty(propertyToToggle)).toBe(!initialPropertyValue);
+    const toggledPropertyValue = !initialPropertyValue;
+    expect(await component.getProperty(propertyToToggle)).toBe(toggledPropertyValue);
+
+    // assert that direct clicks on component toggle property correctly
+    await component.setProperty(propertyToToggle, initialPropertyValue); // we reset as not all components toggle when clicked
+    await page.waitForChanges();
+    await component.click();
+    await page.waitForChanges();
+    expect(await component.getProperty(propertyToToggle)).toBe(toggledPropertyValue);
   }
 }
 

src/utils/label.ts

@@ -24,6 +24,7 @@ export interface LabelableComponent {
 
 const labelTagName = "calcite-label";
 const labelClickEvent = "calciteInternalLabelClick";
+const onLabelClickMap = new WeakMap<HTMLElement, typeof onLabelClick>();
 
 const findLabelForComponent = (componentEl: HTMLElement): HTMLCalciteLabelElement | null => {
   const id = componentEl.id;
@@ -37,15 +38,29 @@ const findLabelForComponent = (componentEl: HTMLElement): HTMLCalciteLabelElemen
  * Helper to set up label interactions on connectedCallback.
  */
 export function connectLabel(component: LabelableComponent): void {
-  component.labelEl = findLabelForComponent(component.el);
-  component.labelEl?.addEventListener(labelClickEvent, component.onLabelClick);
+  const labelEl = findLabelForComponent(component.el);
+
+  if (!labelEl) {
+    return;
+  }
+
+  component.labelEl = labelEl;
+  const boundOnLabelClick = onLabelClick.bind(component);
+  onLabelClickMap.set(component.el, boundOnLabelClick);
+  component.labelEl.addEventListener(labelClickEvent, boundOnLabelClick);
 }
 
 /**
  * Helper to tear down label interactions on disconnectedCallback.
  */
 export function disconnectLabel(component: LabelableComponent): void {
-  component.labelEl?.removeEventListener(labelClickEvent, component.onLabelClick);
+  if (!component.labelEl) {
+    return;
+  }
+
+  const boundOnLabelClick = onLabelClickMap.get(component.el);
+  component.labelEl.removeEventListener(labelClickEvent, boundOnLabelClick);
+  onLabelClickMap.delete(component.el);
 }
 
 /**
@@ -54,3 +69,13 @@ export function disconnectLabel(component: LabelableComponent): void {
 export function getLabelText(component: LabelableComponent): string {
   return component.label || component.labelEl?.textContent?.trim() || "";
 }
+
+function onLabelClick(this: LabelableComponent, event: CustomEvent<{ sourceEvent: MouseEvent }>): void {
+  const containedLabelableChildClicked = this.el.contains(event.detail.sourceEvent.target as HTMLElement);
+
+  if (containedLabelableChildClicked) {
+    return;
+  }
+
+  this.onLabelClick(event);
+}