diff --git a/checkbox/internal/checkbox.ts b/checkbox/internal/checkbox.ts index baea8e1881..50b171c7ef 100644 --- a/checkbox/internal/checkbox.ts +++ b/checkbox/internal/checkbox.ts @@ -153,6 +153,7 @@ export class Checkbox extends checkboxBaseClass { ?required=${this.required} .indeterminate=${this.indeterminate} .checked=${this.checked} + @input=${this.handleInput} @change=${this.handleChange} />
@@ -167,11 +168,15 @@ export class Checkbox extends checkboxBaseClass { `; } - private handleChange(event: Event) { + private handleInput(event: Event) { const target = event.target as HTMLInputElement; this.checked = target.checked; this.indeterminate = target.indeterminate; + // 'input' event bubbles and is composed, don't re-dispatch it. + } + private handleChange(event: Event) { + // 'change' event is not composed, re-dispatch it. redispatchEvent(this, event); } diff --git a/checkbox/internal/checkbox_test.ts b/checkbox/internal/checkbox_test.ts index 9106f44211..61f368a332 100644 --- a/checkbox/internal/checkbox_test.ts +++ b/checkbox/internal/checkbox_test.ts @@ -82,6 +82,42 @@ describe('checkbox', () => { expect(inputHandler).toHaveBeenCalledTimes(1); expect(inputHandler).toHaveBeenCalledWith(jasmine.any(Event)); }); + + it('checkbox state is updated during input event listeners', async () => { + const {harness} = await setupTest(); + let state = false; + const inputHandler = jasmine + .createSpy('inputHandler') + .and.callFake(() => { + state = harness.element.checked; + }); + + harness.element.addEventListener('input', inputHandler); + + await harness.clickWithMouse(); + expect(inputHandler).withContext('input listener').toHaveBeenCalled(); + expect(state) + .withContext('checkbox.checked during input listener') + .toBeTrue(); + }); + + it('checkbox state is updated during change event listeners', async () => { + const {harness} = await setupTest(); + let state = false; + const changeHandler = jasmine + .createSpy('changeHandler') + .and.callFake(() => { + state = harness.element.checked; + }); + + harness.element.addEventListener('change', changeHandler); + + await harness.clickWithMouse(); + expect(changeHandler).withContext('change listener').toHaveBeenCalled(); + expect(state) + .withContext('checkbox.checked during change listener') + .toBeTrue(); + }); }); describe('checked', () => {