fix(material/chips): add only active autocomplete option on selection

close #32204, #13574

Author: lekhmanrus

goldens/material/chips/index.api.md

@@ -132,6 +132,15 @@ export class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoCheck
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChip, never>;
 }
 
+// @public (undocumented)
+export class MatChipAutocompleteInput extends MatChipInput {
+    _emitChipEnd(event?: KeyboardEvent): void;
+    // (undocumented)
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipAutocompleteInput, "input[matChipInputFor][matAutocomplete]", ["matChipInput", "matChipInputFor"], {}, {}, never, never, true, never>;
+    // (undocumented)
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatChipAutocompleteInput, never>;
+}
+
 // @public
 export class MatChipAvatar {
     // (undocumented)
@@ -288,6 +297,7 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy {
     protected _getReadonlyAttribute(): string | null;
     id: string;
     readonly inputElement: HTMLInputElement;
+    protected _isSeparatorKey(event: KeyboardEvent): boolean;
     _keydown(event: KeyboardEvent): void;
     // (undocumented)
     static ngAcceptInputType_addOnBlur: unknown;
@@ -309,7 +319,7 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy {
     // (undocumented)
     setDescribedByIds(ids: string[]): void;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipInput, "input[matChipInputFor]", ["matChipInput", "matChipInputFor"], { "chipGrid": { "alias": "matChipInputFor"; "required": false; }; "addOnBlur": { "alias": "matChipInputAddOnBlur"; "required": false; }; "separatorKeyCodes": { "alias": "matChipInputSeparatorKeyCodes"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "id": { "alias": "id"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "disabledInteractive": { "alias": "matChipInputDisabledInteractive"; "required": false; }; }, { "chipEnd": "matChipInputTokenEnd"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipInput, "input[matChipInputFor]:not([matAutocomplete])", ["matChipInput", "matChipInputFor"], { "chipGrid": { "alias": "matChipInputFor"; "required": false; }; "addOnBlur": { "alias": "matChipInputAddOnBlur"; "required": false; }; "separatorKeyCodes": { "alias": "matChipInputSeparatorKeyCodes"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "id": { "alias": "id"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "disabledInteractive": { "alias": "matChipInputDisabledInteractive"; "required": false; }; }, { "chipEnd": "matChipInputTokenEnd"; }, never, never, true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipInput, never>;
 }
@@ -541,7 +551,7 @@ export class MatChipsModule {
     // (undocumented)
     static ɵinj: i0.ɵɵInjectorDeclaration<MatChipsModule>;
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatChipsModule, never, [typeof MatRippleModule, typeof MatChipAction, typeof MatChip, typeof MatChipAvatar, typeof MatChipEdit, typeof MatChipEditInput, typeof MatChipGrid, typeof MatChipInput, typeof MatChipListbox, typeof MatChipOption, typeof MatChipRemove, typeof MatChipRow, typeof MatChipSet, typeof MatChipTrailingIcon], [typeof i2.BidiModule, typeof MatChip, typeof MatChipAvatar, typeof MatChipEdit, typeof MatChipEditInput, typeof MatChipGrid, typeof MatChipInput, typeof MatChipListbox, typeof MatChipOption, typeof MatChipRemove, typeof MatChipRow, typeof MatChipSet, typeof MatChipTrailingIcon]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatChipsModule, never, [typeof MatRippleModule, typeof MatChipAction, typeof MatChip, typeof MatChipAvatar, typeof MatChipEdit, typeof MatChipEditInput, typeof MatChipGrid, typeof MatChipAutocompleteInput, typeof MatChipInput, typeof MatChipListbox, typeof MatChipOption, typeof MatChipRemove, typeof MatChipRow, typeof MatChipSet, typeof MatChipTrailingIcon], [typeof i2.BidiModule, typeof MatChip, typeof MatChipAvatar, typeof MatChipEdit, typeof MatChipEditInput, typeof MatChipGrid, typeof MatChipAutocompleteInput, typeof MatChipInput, typeof MatChipListbox, typeof MatChipOption, typeof MatChipRemove, typeof MatChipRow, typeof MatChipSet, typeof MatChipTrailingIcon]>;
 }
 
 // @public

src/material/chips/BUILD.bazel

@@ -100,6 +100,7 @@ ng_project(
         "//:node_modules/@angular/forms",
         "//:node_modules/rxjs",
         "//src:dev_mode_types",
+        "//src/material/autocomplete",
         "//src/material/core",
         "//src/material/form-field",
     ],

src/material/chips/chip-input.ts

@@ -19,6 +19,7 @@ import {
   inject,
 } from '@angular/core';
 import {_IdGenerator} from '@angular/cdk/a11y';
+import {MatAutocompleteTrigger} from '../autocomplete';
 import {MatFormField, MAT_FORM_FIELD} from '../form-field';
 import {MatChipsDefaultOptions, MAT_CHIPS_DEFAULT_OPTIONS, SeparatorKey} from './tokens';
 import {MatChipGrid} from './chip-grid';
@@ -45,7 +46,7 @@ export interface MatChipInputEvent {
  * May be placed inside or outside of a `<mat-chip-grid>`.
  */
 @Directive({
-  selector: 'input[matChipInputFor]',
+  selector: 'input[matChipInputFor]:not([matAutocomplete])',
   exportAs: 'matChipInput, matChipInputFor',
   host: {
     // TODO: eventually we should remove `mat-input-element` from here since it comes from the
@@ -242,7 +243,7 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy {
   }
 
   /** Checks whether a keycode is one of the configured separators. */
-  private _isSeparatorKey(event: KeyboardEvent): boolean {
+  protected _isSeparatorKey(event: KeyboardEvent): boolean {
     if (!this.separatorKeyCodes) {
       return false;
     }
@@ -276,3 +277,29 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy {
     return this.readonly || (this.disabled && this.disabledInteractive) ? 'true' : null;
   }
 }
+
+/**
+ * Directive that adds chip-specific behaviors to an autocomplete input element inside
+ * `<mat-form-field>`.
+ * May be placed inside or outside of a `<mat-chip-grid>`.
+ */
+@Directive({
+  selector: 'input[matChipInputFor][matAutocomplete]',
+  exportAs: 'matChipInput, matChipInputFor',
+})
+export class MatChipAutocompleteInput extends MatChipInput {
+  private readonly _autocompleteTrigger = inject(MatAutocompleteTrigger);
+
+  /** Checks to see if the (chipEnd) event needs to be emitted. */
+  override _emitChipEnd(event?: KeyboardEvent) {
+    if (
+      (!event || (super._isSeparatorKey(event) && !event.repeat)) &&
+      this._autocompleteTrigger.autocomplete.isOpen &&
+      this._autocompleteTrigger.activeOption
+    ) {
+      event?.preventDefault();
+    } else {
+      super._emitChipEnd(event);
+    }
+  }
+}

src/material/chips/chips-module.ts

@@ -14,7 +14,7 @@ import {MAT_CHIPS_DEFAULT_OPTIONS, MatChipsDefaultOptions} from './tokens';
 import {MatChipEditInput} from './chip-edit-input';
 import {MatChipGrid} from './chip-grid';
 import {MatChipAvatar, MatChipEdit, MatChipRemove, MatChipTrailingIcon} from './chip-icons';
-import {MatChipInput} from './chip-input';
+import {MatChipAutocompleteInput, MatChipInput} from './chip-input';
 import {MatChipListbox} from './chip-listbox';
 import {MatChipRow} from './chip-row';
 import {MatChipOption} from './chip-option';
@@ -28,6 +28,7 @@ const CHIP_DECLARATIONS = [
   MatChipEdit,
   MatChipEditInput,
   MatChipGrid,
+  MatChipAutocompleteInput,
   MatChipInput,
   MatChipListbox,
   MatChipOption,