Skip to content

Commit 5153a5c

Browse files
authored
fix(material/chips): emitting end event multiple times when holding down key (#29894)
Fixes that that the chip input was emitting the `matChipEnd` event while the user is holding down the separator key. Fixes #29883.
1 parent 1cd73e9 commit 5153a5c

File tree

2 files changed

+20
-2
lines changed

2 files changed

+20
-2
lines changed

src/material/chips/chip-input.spec.ts

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
import {Directionality} from '@angular/cdk/bidi';
22
import {COMMA, ENTER, TAB} from '@angular/cdk/keycodes';
33
import {PlatformModule} from '@angular/cdk/platform';
4-
import {dispatchKeyboardEvent} from '@angular/cdk/testing/private';
4+
import {
5+
createKeyboardEvent,
6+
dispatchKeyboardEvent,
7+
dispatchEvent,
8+
} from '@angular/cdk/testing/private';
59
import {Component, DebugElement, ViewChild} from '@angular/core';
610
import {ComponentFixture, TestBed, fakeAsync, flush, waitForAsync} from '@angular/core/testing';
711
import {MatFormFieldModule} from '@angular/material/form-field';
@@ -248,6 +252,20 @@ describe('MatChipInput', () => {
248252

249253
expect(inputNativeElement.getAttribute('aria-describedby')).toBeNull();
250254
}));
255+
256+
it('should not emit chipEnd if the key is repeated', () => {
257+
spyOn(testChipInput, 'add');
258+
259+
chipInputDirective.separatorKeyCodes = [COMMA];
260+
fixture.detectChanges();
261+
262+
const event = createKeyboardEvent('keydown', COMMA);
263+
Object.defineProperty(event, 'repeat', {get: () => true});
264+
dispatchEvent(inputNativeElement, event);
265+
fixture.detectChanges();
266+
267+
expect(testChipInput.add).not.toHaveBeenCalled();
268+
});
251269
});
252270
});
253271

src/material/chips/chip-input.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,7 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy {
183183

184184
/** Checks to see if the (chipEnd) event needs to be emitted. */
185185
_emitChipEnd(event?: KeyboardEvent) {
186-
if (!event || this._isSeparatorKey(event)) {
186+
if (!event || (this._isSeparatorKey(event) && !event.repeat)) {
187187
this.chipEnd.emit({
188188
input: this.inputElement,
189189
value: this.inputElement.value,

0 commit comments

Comments
 (0)