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

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

close #32204, #13574

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

close #32204, #13574

(cherry picked from commit 943e1e3)

Author: lekhmanrus

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/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>