diff --git a/chips/internal/filter-chip.ts b/chips/internal/filter-chip.ts index 55cbf0f68b..9578f41f3a 100644 --- a/chips/internal/filter-chip.ts +++ b/chips/internal/filter-chip.ts @@ -10,6 +10,7 @@ import {html, nothing, PropertyValues, svg, TemplateResult} from 'lit'; import {property, query} from 'lit/decorators.js'; import {ARIAMixinStrict} from '../../internal/aria/aria.js'; +import {redispatchEvent} from '../../internal/controller/events.js'; import {MultiActionChip} from './multi-action-chip.js'; import {renderRemoveButton} from './trailing-icons.js'; @@ -22,6 +23,9 @@ export class FilterChip extends MultiActionChip { @property({type: Boolean}) removable = false; @property({type: Boolean, reflect: true}) selected = false; + // flag to prvent processing of re-dispatched input event. + private isRedispatchingEvent = false; + protected get primaryId() { return 'option'; } @@ -35,11 +39,23 @@ export class FilterChip extends MultiActionChip { // Remove the `row` role from the container, since filter chips do not use a // `grid` navigation model. this.containerRole = undefined; - this.addEventListener('click', () => { + this.addEventListener('click', (event) => { + // avoid processing a re-dispatched event + if (this.isRedispatchingEvent) { + return; + } + if (this.disabled) { return; } + this.isRedispatchingEvent = true; + const preventDefault = !redispatchEvent(this, event); + this.isRedispatchingEvent = false; + if (preventDefault) { + return; + } + this.selected = !this.selected; }); } diff --git a/chips/internal/filter-chip_test.ts b/chips/internal/filter-chip_test.ts index cf4f1d831a..d538a4154e 100644 --- a/chips/internal/filter-chip_test.ts +++ b/chips/internal/filter-chip_test.ts @@ -76,5 +76,19 @@ describe('Filter chip', () => { await harness.clickWithMouse(); expect(handler).toHaveBeenCalledTimes(2); }); + + it('can prevent default', async () => { + const {chip, harness} = await setupTest(); + const handler = jasmine.createSpy(); + chip.addEventListener('selected', handler); + + chip.addEventListener('click', (event) => { + event.preventDefault(); + }) + + await harness.clickWithMouse(); + await harness.clickWithMouse(); + expect(handler).toHaveBeenCalledTimes(0); + }) }); });