diff --git a/src/components-examples/material/chips/chips-autocomplete/chips-autocomplete-example.ts b/src/components-examples/material/chips/chips-autocomplete/chips-autocomplete-example.ts index c5be527894b1..8ca45828cfc7 100644 --- a/src/components-examples/material/chips/chips-autocomplete/chips-autocomplete-example.ts +++ b/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 { diff --git a/src/material/chips/chips.md b/src/material/chips/chips.md index 3464f0acddbd..6e52171d810a 100644 --- a/src/material/chips/chips.md +++ b/src/material/chips/chips.md @@ -65,6 +65,9 @@ Users can press delete to remove a chip. Pressing delete triggers the `removed` A `` can be combined with `` 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`._ + ### Icons @@ -141,7 +144,7 @@ The chips components support 3 user interaction patterns, each with its own cont `` and `` : 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