From f1ef12ac4f9ba152972d2c89fa66fb830f680c1a Mon Sep 17 00:00:00 2001 From: lsamboretrorabbit Date: Fri, 12 Apr 2024 14:07:02 +0200 Subject: [PATCH] fix(material/chips): chip input with autocomplete has both the selected and the suggested values added Fixes a bug in the Angular Material `chips` component where the autocomplete input has both the selected and the suggested values added. The input should only take the suggested value Fixes #28852 --- src/material/chips/chip-input.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/material/chips/chip-input.ts b/src/material/chips/chip-input.ts index 6c6c68be4063..038a1bddad9c 100644 --- a/src/material/chips/chip-input.ts +++ b/src/material/chips/chip-input.ts @@ -6,7 +6,8 @@ * found in the LICENSE file at https://angular.dev/license */ -import {BACKSPACE, hasModifierKey} from '@angular/cdk/keycodes'; +import {_IdGenerator} from '@angular/cdk/a11y'; +import {BACKSPACE, ENTER, hasModifierKey} from '@angular/cdk/keycodes'; import { Directive, ElementRef, @@ -18,11 +19,10 @@ import { booleanAttribute, inject, } from '@angular/core'; -import {_IdGenerator} from '@angular/cdk/a11y'; -import {MatFormField, MAT_FORM_FIELD} from '@angular/material/form-field'; -import {MatChipsDefaultOptions, MAT_CHIPS_DEFAULT_OPTIONS} from './tokens'; +import {MAT_FORM_FIELD, MatFormField} from '@angular/material/form-field'; import {MatChipGrid} from './chip-grid'; import {MatChipTextControl} from './chip-text-control'; +import {MAT_CHIPS_DEFAULT_OPTIONS, MatChipsDefaultOptions} from './tokens'; /** Represents an input event on a `matChipInput`. */ export interface MatChipInputEvent { @@ -156,6 +156,9 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy { this._chipGrid._focusLastChip(); } event.preventDefault(); + } else if (event.keyCode === ENTER) { + // Prevent adding both the search string and the selected suggestion + event.preventDefault(); } else { this._emitChipEnd(event); }