From 4d4dd563412044d014e7520bf4d64f932f158d28 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 18 Oct 2024 09:13:12 +0200 Subject: [PATCH] fix(material/chips): emitting end event multiple times when holding down key Fixes that that the chip input was emitting the `matChipEnd` event while the user is holding down the separator key. Fixes #29883. --- src/material/chips/chip-input.spec.ts | 20 +++++++++++++++++++- src/material/chips/chip-input.ts | 2 +- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/src/material/chips/chip-input.spec.ts b/src/material/chips/chip-input.spec.ts index f5879783ab7f..7dc78400e713 100644 --- a/src/material/chips/chip-input.spec.ts +++ b/src/material/chips/chip-input.spec.ts @@ -1,7 +1,11 @@ import {Directionality} from '@angular/cdk/bidi'; import {COMMA, ENTER, TAB} from '@angular/cdk/keycodes'; import {PlatformModule} from '@angular/cdk/platform'; -import {dispatchKeyboardEvent} from '@angular/cdk/testing/private'; +import { + createKeyboardEvent, + dispatchKeyboardEvent, + dispatchEvent, +} from '@angular/cdk/testing/private'; import {Component, DebugElement, ViewChild} from '@angular/core'; import {ComponentFixture, TestBed, fakeAsync, flush, waitForAsync} from '@angular/core/testing'; import {MatFormFieldModule} from '@angular/material/form-field'; @@ -248,6 +252,20 @@ describe('MatChipInput', () => { expect(inputNativeElement.getAttribute('aria-describedby')).toBeNull(); })); + + it('should not emit chipEnd if the key is repeated', () => { + spyOn(testChipInput, 'add'); + + chipInputDirective.separatorKeyCodes = [COMMA]; + fixture.detectChanges(); + + const event = createKeyboardEvent('keydown', COMMA); + Object.defineProperty(event, 'repeat', {get: () => true}); + dispatchEvent(inputNativeElement, event); + fixture.detectChanges(); + + expect(testChipInput.add).not.toHaveBeenCalled(); + }); }); }); diff --git a/src/material/chips/chip-input.ts b/src/material/chips/chip-input.ts index a2533aed43de..ce79c55d40fe 100644 --- a/src/material/chips/chip-input.ts +++ b/src/material/chips/chip-input.ts @@ -183,7 +183,7 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy { /** Checks to see if the (chipEnd) event needs to be emitted. */ _emitChipEnd(event?: KeyboardEvent) { - if (!event || this._isSeparatorKey(event)) { + if (!event || (this._isSeparatorKey(event) && !event.repeat)) { this.chipEnd.emit({ input: this.inputElement, value: this.inputElement.value,