Skip to content

Commit 501faa9

Browse files
committedOct 18, 2024·
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. (cherry picked from commit 5153a5c)
1 parent 474f0c1 commit 501faa9

File tree

2 files changed

+20
-2
lines changed

2 files changed

+20
-2
lines changed
 

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

+19-1
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

+1-1
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,7 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy {
182182

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

0 commit comments

Comments
 (0)
Please sign in to comment.