fix(material/chips): emitting end event multiple times when holding d…

…own key (#29894)

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

@@ -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();
+    });
   });
 });
 

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,