fix(iconbutton): use event dispatch hooks for toggle clicks

PiperOrigin-RevId: 876324676

Author: asyncliz

iconbutton/internal/icon-button.ts

@@ -20,6 +20,10 @@ import {
   type FormSubmitterType,
 } from '../../internal/controller/form-submitter.js';
 import {isRtl} from '../../internal/controller/is-rtl.js';
+import {
+  afterDispatch,
+  setupDispatchHooks,
+} from '../../internal/events/dispatch-hooks.js';
 import {
   internals,
   mixinElementInternals,
@@ -146,9 +150,36 @@ export class IconButton extends iconButtonBaseClass implements FormSubmitter {
 
   constructor() {
     super();
-    if (!isServer) {
-      this.addEventListener('click', this.handleClick.bind(this));
-    }
+    if (isServer) return;
+    setupDispatchHooks(this, 'click');
+    this.addEventListener('click', (event) => {
+      // If the button is soft-disabled or a disabled link, we need to
+      // explicitly prevent the click from propagating to other event listeners
+      // as well as prevent the default action. This is because the underlying
+      // `<button>` or `<a>` element is not actually `:disabled`.
+      if (this.softDisabled || (this.disabled && this.href)) {
+        event.stopImmediatePropagation();
+        event.preventDefault();
+        return;
+      }
+
+      // Save current selected state to toggle, since an external event listener
+      // may also change the selected state on click.
+      const wasSelected = this.selected;
+      afterDispatch(event, () => {
+        if (!this.toggle || this.disabled || event.defaultPrevented) {
+          return;
+        }
+
+        this.selected = !wasSelected;
+        this.dispatchEvent(
+          new InputEvent('input', {bubbles: true, composed: true}),
+        );
+        // Bubbles but does not compose to mimic native browser <input> & <select>
+        // Additionally, native change event is not an InputEvent.
+        this.dispatchEvent(new Event('change', {bubbles: true}));
+      });
+    });
   }
 
   protected override willUpdate() {
@@ -180,8 +211,7 @@ export class IconButton extends iconButtonBaseClass implements FormSubmitter {
         aria-expanded="${(!this.href && ariaExpanded) || nothing}"
         aria-pressed="${ariaPressedValue}"
         aria-disabled=${(!this.href && this.softDisabled) || nothing}
-        ?disabled="${!this.href && this.disabled}"
-        @click="${this.handleClickOnChild}">
+        ?disabled="${!this.href && this.disabled}">
         ${this.renderFocusRing()}
         ${this.renderRipple()}
         ${!this.selected ? this.renderIcon() : nothing}
@@ -247,41 +277,4 @@ export class IconButton extends iconButtonBaseClass implements FormSubmitter {
     this.flipIcon = isRtl(this, this.flipIconInRtl);
     super.connectedCallback();
   }
-
-  /** Handles a click on this element. */
-  private handleClick(event: MouseEvent) {
-    // If the icon button is soft-disabled, we need to explicitly prevent the
-    // click from propagating to other event listeners as well as prevent the
-    // default action.
-    if (!this.href && this.softDisabled) {
-      event.stopImmediatePropagation();
-      event.preventDefault();
-      return;
-    }
-  }
-
-  /**
-   * Handles a click on the child <div> or <button> element within this
-   * element's shadow DOM.
-   */
-  private async handleClickOnChild(event: Event) {
-    // Allow the event to propagate
-    await 0;
-    if (
-      !this.toggle ||
-      this.disabled ||
-      this.softDisabled ||
-      event.defaultPrevented
-    ) {
-      return;
-    }
-
-    this.selected = !this.selected;
-    this.dispatchEvent(
-      new InputEvent('input', {bubbles: true, composed: true}),
-    );
-    // Bubbles but does not compose to mimic native browser <input> & <select>
-    // Additionally, native change event is not an InputEvent.
-    this.dispatchEvent(new Event('change', {bubbles: true}));
-  }
 }

internal/events/dispatch-hooks.ts

@@ -154,7 +154,7 @@ export function setupDispatchHooks(
         // Re-dispatch the event. We can't reuse `redispatchEvent()` since we
         // need to add the hooks to the copy before it's dispatched.
         isRedispatching = true;
-        const dispatched = element.dispatchEvent(eventCopy);
+        const dispatched = event.composedPath()[0].dispatchEvent(eventCopy);
         isRedispatching = false;
         if (!dispatched) {
           event.preventDefault();

internal/events/dispatch-hooks_test.ts

@@ -39,6 +39,21 @@ describe('dispatch hooks', () => {
         .withContext('element.addEventListener')
         .toHaveBeenCalledTimes(3);
     });
+
+    it('triggers internal event listeners when a composed element is the source of the event', () => {
+      const shadowRoot = element.attachShadow({mode: 'open'});
+      const composedElement = document.createElement('button');
+      shadowRoot.appendChild(composedElement);
+      const innerClickListener = jasmine.createSpy('innerClickListener');
+      composedElement.addEventListener('click', innerClickListener);
+
+      setupDispatchHooks(element, 'click');
+      composedElement.click();
+
+      expect(innerClickListener)
+        .withContext('innerClickListener')
+        .toHaveBeenCalledTimes(1);
+    });
   });
 
   describe('afterDispatch()', () => {