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

close #32204, #13574

Author: lekhmanrus

goldens/material/chips/index.api.md

@@ -132,15 +132,6 @@ 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)
@@ -297,7 +288,6 @@ 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;
@@ -319,7 +309,7 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy {
     // (undocumented)
     setDescribedByIds(ids: string[]): void;
     // (undocumented)
-    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>;
+    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>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipInput, never>;
 }
@@ -551,7 +541,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 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]>;
+    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]>;
 }
 
 // @public

src/components-examples/material/chips/chips-autocomplete/chips-autocomplete-example.ts

@@ -2,8 +2,11 @@ import {LiveAnnouncer} from '@angular/cdk/a11y';
 import {COMMA, ENTER} from '@angular/cdk/keycodes';
 import {ChangeDetectionStrategy, Component, computed, inject, model, signal} from '@angular/core';
 import {FormsModule} from '@angular/forms';
-import {MatAutocompleteModule, MatAutocompleteSelectedEvent} from '@angular/material/autocomplete';
-import {MatChipInputEvent, MatChipsModule} from '@angular/material/chips';
+import {
+  MatAutocompleteModule,
+  type MatAutocompleteSelectedEvent,
+} from '@angular/material/autocomplete';
+import {type MatChipInputEvent, MatChipsModule} from '@angular/material/chips';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatIconModule} from '@angular/material/icon';
 
@@ -14,7 +17,9 @@ import {MatIconModule} from '@angular/material/icon';
   selector: 'chips-autocomplete-example',
   templateUrl: 'chips-autocomplete-example.html',
   styleUrl: 'chips-autocomplete-example.css',
-  imports: [MatFormFieldModule, MatChipsModule, MatIconModule, MatAutocompleteModule, FormsModule],
+  // Make sure to import `MatAutocompleteModule` before `MatChipsModule` to prevent adding typed
+  // text when autocomplete option is selected via keyboard).
+  imports: [MatFormFieldModule, MatAutocompleteModule, MatChipsModule, MatIconModule, FormsModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ChipsAutocompleteExample {

src/material/chips/BUILD.bazel

@@ -100,7 +100,6 @@ 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,7 +19,6 @@ 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';
@@ -46,7 +45,7 @@ export interface MatChipInputEvent {
  * May be placed inside or outside of a `<mat-chip-grid>`.
  */
 @Directive({
-  selector: 'input[matChipInputFor]:not([matAutocomplete])',
+  selector: 'input[matChipInputFor]',
   exportAs: 'matChipInput, matChipInputFor',
   host: {
     // TODO: eventually we should remove `mat-input-element` from here since it comes from the
@@ -243,7 +242,7 @@ export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy {
   }
 
   /** Checks whether a keycode is one of the configured separators. */
-  protected _isSeparatorKey(event: KeyboardEvent): boolean {
+  private _isSeparatorKey(event: KeyboardEvent): boolean {
     if (!this.separatorKeyCodes) {
       return false;
     }
@@ -277,29 +276,3 @@ 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 {MatChipAutocompleteInput, MatChipInput} from './chip-input';
+import {MatChipInput} from './chip-input';
 import {MatChipListbox} from './chip-listbox';
 import {MatChipRow} from './chip-row';
 import {MatChipOption} from './chip-option';
@@ -28,7 +28,6 @@ const CHIP_DECLARATIONS = [
   MatChipEdit,
   MatChipEditInput,
   MatChipGrid,
-  MatChipAutocompleteInput,
   MatChipInput,
   MatChipListbox,
   MatChipOption,

src/material/chips/chips.md

@@ -65,6 +65,9 @@ Users can press delete to remove a chip. Pressing delete triggers the `removed`
 
 A `<mat-chip-grid>` can be combined with `<mat-autocomplete>` to enable free-form chip input with suggestions.
 
+> _Please note: when using `MatChipsModule` together with `MatAutocompleteModule`, the order in which modules are imported matters._
+> _To ensure correct behavior (e.g., preventing adding typed text when autocomplete option is selected via keyboard), make sure to import `MatAutocompleteModule` before `MatChipsModule`._
+
 <!-- example(chips-autocomplete) -->
 
 ### Icons
@@ -141,7 +144,7 @@ The chips components support 3 user interaction patterns, each with its own cont
 
 `<mat-chip-grid>` and `<mat-chip-row>` : These elements implement a grid accessibility pattern. Use them as part of a free form input that allows users to enter text to add chips.
 
-Note : be sure to have the input element be a sibling of mat-chip-grid to ensure accessibility of the input element by accessibility devices such as Voice Control. It is also recommended to apply an appropriate `aria-label` to the input to optimize accessibility of the input.
+> _Please note: be sure to have the input element be a sibling of `mat-chip-grid` to ensure accessibility of the input element by accessibility devices such as Voice Control. It is also recommended to apply an appropriate `aria-label` to the input to optimize accessibility of the input._
 
 ```html
 <mat-form-field>