Merge pull request #5501 from vdegenne:switch-input-event

PiperOrigin-RevId: 614856943

Author: copybara-github

switch/internal/switch.ts

@@ -114,6 +114,7 @@ export class Switch extends switchBaseClass {
           ?checked=${this.selected}
           ?disabled=${this.disabled}
           ?required=${this.required}
+          @input=${this.handleInput}
           @change=${this.handleChange} />
 
         <md-focus-ring part="focus-ring" for="switch"></md-focus-ring>
@@ -190,9 +191,14 @@ export class Switch extends switchBaseClass {
     return this.icons || this.showOnlySelectedIcon;
   }
 
-  private handleChange(event: Event) {
+  private handleInput(event: Event) {
     const target = event.target as HTMLInputElement;
     this.selected = target.checked;
+    // <input> 'input' event bubbles and is composed, don't re-dispatch it.
+  }
+
+  private handleChange(event: Event) {
+    // <input> 'change' event is not composed, re-dispatch it.
     redispatchEvent(this, event);
   }
 

switch/internal/switch_test.ts

@@ -161,6 +161,23 @@ describe('md-switch', () => {
       toggle.click();
       expect(toggle.selected).withContext('should remain false').toBeFalse();
     });
+
+    it('reflects `selected` state in input events', () => {
+      let state = false;
+      const inputHandler = jasmine
+        .createSpy('inputHandler')
+        .and.callFake(() => {
+          state = toggle.selected;
+        });
+
+      toggle.addEventListener('input', inputHandler);
+
+      toggle.click();
+      expect(inputHandler).withContext('input listener').toHaveBeenCalled();
+      expect(state)
+        .withContext('switch.selected during input listener')
+        .toBeTrue();
+    });
   });
 
   describe('form submission', () => {