Skip to content

Commit 3ddb231

Browse files
lekhmanruslekhmanrus
committed
main - 943e1e3 docs(material/chips): add only active autocomplete option on selection (#32208)
1 parent 7482f11 commit 3ddb231

6 files changed

Lines changed: 56 additions & 40 deletions

File tree

‎docs-content/examples-highlighted/material/chips/chips-autocomplete/chips-autocomplete-example-ts.html‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,11 @@
22
<span class="hljs-keyword">import</span> {<span class="hljs-variable constant_">COMMA</span>, <span class="hljs-variable constant_">ENTER</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/cdk/keycodes&#x27;</span>;
33
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">ChangeDetectionStrategy</span>, <span class="hljs-title class_">Component</span>, computed, inject, model, signal} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
44
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">FormsModule</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/forms&#x27;</span>;
5-
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">MatAutocompleteModule</span>, <span class="hljs-title class_">MatAutocompleteSelectedEvent</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/autocomplete&#x27;</span>;
6-
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">MatChipInputEvent</span>, <span class="hljs-title class_">MatChipsModule</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/chips&#x27;</span>;
5+
<span class="hljs-keyword">import</span> {
6+
<span class="hljs-title class_">MatAutocompleteModule</span>,
7+
<span class="hljs-keyword">type</span> <span class="hljs-title class_">MatAutocompleteSelectedEvent</span>,
8+
} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/autocomplete&#x27;</span>;
9+
<span class="hljs-keyword">import</span> {<span class="hljs-keyword">type</span> <span class="hljs-title class_">MatChipInputEvent</span>, <span class="hljs-title class_">MatChipsModule</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/chips&#x27;</span>;
710
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">MatFormFieldModule</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/form-field&#x27;</span>;
811
<span class="hljs-keyword">import</span> {<span class="hljs-title class_">MatIconModule</span>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/icon&#x27;</span>;
912

@@ -14,7 +17,9 @@
1417
<span class="hljs-attr">selector</span>: <span class="hljs-string">&#x27;chips-autocomplete-example&#x27;</span>,
1518
<span class="hljs-attr">templateUrl</span>: <span class="hljs-string">&#x27;chips-autocomplete-example.html&#x27;</span>,
1619
<span class="hljs-attr">styleUrl</span>: <span class="hljs-string">&#x27;chips-autocomplete-example.css&#x27;</span>,
17-
<span class="hljs-attr">imports</span>: [<span class="hljs-title class_">MatFormFieldModule</span>, <span class="hljs-title class_">MatChipsModule</span>, <span class="hljs-title class_">MatIconModule</span>, <span class="hljs-title class_">MatAutocompleteModule</span>, <span class="hljs-title class_">FormsModule</span>],
20+
<span class="hljs-comment">// Make sure to import `MatAutocompleteModule` before `MatChipsModule` to prevent adding typed</span>
21+
<span class="hljs-comment">// text when autocomplete option is selected via keyboard).</span>
22+
<span class="hljs-attr">imports</span>: [<span class="hljs-title class_">MatFormFieldModule</span>, <span class="hljs-title class_">MatAutocompleteModule</span>, <span class="hljs-title class_">MatChipsModule</span>, <span class="hljs-title class_">MatIconModule</span>, <span class="hljs-title class_">FormsModule</span>],
1823
<span class="hljs-attr">changeDetection</span>: <span class="hljs-title class_">ChangeDetectionStrategy</span>.<span class="hljs-property">OnPush</span>,
1924
})
2025
<span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">ChipsAutocompleteExample</span> {

‎docs-content/examples-source/material/chips/chips-autocomplete/chips-autocomplete-example.ts‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,11 @@ import {LiveAnnouncer} from '@angular/cdk/a11y';
22
import {COMMA, ENTER} from '@angular/cdk/keycodes';
33
import {ChangeDetectionStrategy, Component, computed, inject, model, signal} from '@angular/core';
44
import {FormsModule} from '@angular/forms';
5-
import {MatAutocompleteModule, MatAutocompleteSelectedEvent} from '@angular/material/autocomplete';
6-
import {MatChipInputEvent, MatChipsModule} from '@angular/material/chips';
5+
import {
6+
MatAutocompleteModule,
7+
type MatAutocompleteSelectedEvent,
8+
} from '@angular/material/autocomplete';
9+
import {type MatChipInputEvent, MatChipsModule} from '@angular/material/chips';
710
import {MatFormFieldModule} from '@angular/material/form-field';
811
import {MatIconModule} from '@angular/material/icon';
912

@@ -14,7 +17,9 @@ import {MatIconModule} from '@angular/material/icon';
1417
selector: 'chips-autocomplete-example',
1518
templateUrl: 'chips-autocomplete-example.html',
1619
styleUrl: 'chips-autocomplete-example.css',
17-
imports: [MatFormFieldModule, MatChipsModule, MatIconModule, MatAutocompleteModule, FormsModule],
20+
// Make sure to import `MatAutocompleteModule` before `MatChipsModule` to prevent adding typed
21+
// text when autocomplete option is selected via keyboard).
22+
imports: [MatFormFieldModule, MatAutocompleteModule, MatChipsModule, MatIconModule, FormsModule],
1823
changeDetection: ChangeDetectionStrategy.OnPush,
1924
})
2025
export class ChipsAutocompleteExample {

‎docs-content/overviews/material/chips/chips.md.html‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,10 @@ <h4 id="autocomplete" class="docs-header-link">
7070
Autocomplete
7171
</h4>
7272
<p>A <code>&lt;mat-chip-grid&gt;</code> can be combined with <code>&lt;mat-autocomplete&gt;</code> to enable free-form chip input with suggestions.</p>
73+
<blockquote>
74+
<p><em>Please note: when using <code>MatChipsModule</code> together with <code>MatAutocompleteModule</code>, the order in which modules are imported matters.</em>
75+
<em>To ensure correct behavior (e.g., preventing adding typed text when autocomplete option is selected via keyboard), make sure to import <code>MatAutocompleteModule</code> before <code>MatChipsModule</code>.</em></p>
76+
</blockquote>
7377
</div><div material-docs-example="chips-autocomplete"></div><div class="docs-markdown">
7478

7579

@@ -146,7 +150,9 @@ <h4 id="text-entry" class="docs-header-link">
146150
Text Entry
147151
</h4>
148152
<p><code>&lt;mat-chip-grid&gt;</code> and <code>&lt;mat-chip-row&gt;</code> : 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.</p>
149-
<p>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 <code>aria-label</code> to the input to optimize accessibility of the input.</p>
153+
<blockquote>
154+
<p><em>Please note: be sure to have the input element be a sibling of <code>mat-chip-grid</code> to ensure accessibility of the input element by accessibility devices such as Voice Control. It is also recommended to apply an appropriate <code>aria-label</code> to the input to optimize accessibility of the input.</em></p>
155+
</blockquote>
150156
<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">mat-form-field</span>&gt;</span>
151157
<span class="hljs-tag">&lt;<span class="hljs-name">mat-chip-grid</span> #<span class="hljs-attr">myChipGrid</span> [(<span class="hljs-attr">ngModel</span>)]=<span class="hljs-string">&quot;mySelection&quot;</span>
152158
<span class="hljs-attr">aria-label</span>=<span class="hljs-string">&quot;enter sandwich fillings&quot;</span>&gt;</span>

‎fesm2022/material-chips.mjs‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,29 @@ class ChipsAutocompleteExample {
9797
kind: "directive",
9898
type: i1.MatLabel,
9999
selector: "mat-label"
100+
}, {
101+
kind: "ngmodule",
102+
type: MatAutocompleteModule
103+
}, {
104+
kind: "component",
105+
type: i4.MatAutocomplete,
106+
selector: "mat-autocomplete",
107+
inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"],
108+
outputs: ["optionSelected", "opened", "closed", "optionActivated"],
109+
exportAs: ["matAutocomplete"]
110+
}, {
111+
kind: "component",
112+
type: i4.MatOption,
113+
selector: "mat-option",
114+
inputs: ["value", "id", "disabled"],
115+
outputs: ["onSelectionChange"],
116+
exportAs: ["matOption"]
117+
}, {
118+
kind: "directive",
119+
type: i4.MatAutocompleteTrigger,
120+
selector: "input[matAutocomplete], textarea[matAutocomplete]",
121+
inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"],
122+
exportAs: ["matAutocompleteTrigger"]
100123
}, {
101124
kind: "ngmodule",
102125
type: MatChipsModule
@@ -132,29 +155,6 @@ class ChipsAutocompleteExample {
132155
selector: "mat-icon",
133156
inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"],
134157
exportAs: ["matIcon"]
135-
}, {
136-
kind: "ngmodule",
137-
type: MatAutocompleteModule
138-
}, {
139-
kind: "component",
140-
type: i4.MatAutocomplete,
141-
selector: "mat-autocomplete",
142-
inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"],
143-
outputs: ["optionSelected", "opened", "closed", "optionActivated"],
144-
exportAs: ["matAutocomplete"]
145-
}, {
146-
kind: "component",
147-
type: i4.MatOption,
148-
selector: "mat-option",
149-
inputs: ["value", "id", "disabled"],
150-
outputs: ["onSelectionChange"],
151-
exportAs: ["matOption"]
152-
}, {
153-
kind: "directive",
154-
type: i4.MatAutocompleteTrigger,
155-
selector: "input[matAutocomplete], textarea[matAutocomplete]",
156-
inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"],
157-
exportAs: ["matAutocompleteTrigger"]
158158
}, {
159159
kind: "ngmodule",
160160
type: FormsModule
@@ -201,7 +201,7 @@ i0.ɵɵngDeclareClassMetadata({
201201
type: Component,
202202
args: [{
203203
selector: 'chips-autocomplete-example',
204-
imports: [MatFormFieldModule, MatChipsModule, MatIconModule, MatAutocompleteModule, FormsModule],
204+
imports: [MatFormFieldModule, MatAutocompleteModule, MatChipsModule, MatIconModule, FormsModule],
205205
changeDetection: ChangeDetectionStrategy.OnPush,
206206
template: "<form>\n <mat-form-field class=\"example-chip-list\">\n <mat-label>Favorite Fruits</mat-label>\n <mat-chip-grid #chipGrid aria-label=\"Fruit selection\">\n @for (fruit of fruits(); track $index) {\n <mat-chip-row (removed)=\"remove(fruit)\">\n {{fruit}}\n <button matChipRemove [attr.aria-label]=\"'remove ' + fruit\">\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n </mat-chip-grid>\n <input\n name=\"currentFruit\"\n placeholder=\"New Fruit...\"\n #fruitInput\n [(ngModel)]=\"currentFruit\"\n [matChipInputFor]=\"chipGrid\"\n [matAutocomplete]=\"auto\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n (matChipInputTokenEnd)=\"add($event)\"\n />\n <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event); fruitInput.value = ''\">\n @for (fruit of filteredFruits(); track fruit) {\n <mat-option [value]=\"fruit\">{{fruit}}</mat-option>\n }\n </mat-autocomplete>\n </mat-form-field>\n</form>\n",
207207
styles: [".example-chip-list {\n width: 100%;\n}\n"]

‎fesm2022/material-chips.mjs.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@angular/components-examples",
3-
"version": "21.1.0-next.0+sha-4711d53",
3+
"version": "21.1.0-next.0+sha-943e1e3",
44
"description": "Angular Components Examples",
55
"private": true,
66
"repository": {
@@ -283,15 +283,15 @@
283283
},
284284
"homepage": "https://github.com/angular/components#readme",
285285
"peerDependencies": {
286-
"@angular/aria": "21.1.0-next.0+sha-4711d53",
287-
"@angular/cdk": "21.1.0-next.0+sha-4711d53",
288-
"@angular/cdk-experimental": "21.1.0-next.0+sha-4711d53",
286+
"@angular/aria": "21.1.0-next.0+sha-943e1e3",
287+
"@angular/cdk": "21.1.0-next.0+sha-943e1e3",
288+
"@angular/cdk-experimental": "21.1.0-next.0+sha-943e1e3",
289289
"@angular/core": "^21.0.0-0 || ^21.1.0-0 || ^21.2.0-0 || ^21.3.0-0 || ^22.0.0-0",
290290
"@angular/common": "^21.0.0-0 || ^21.1.0-0 || ^21.2.0-0 || ^21.3.0-0 || ^22.0.0-0",
291-
"@angular/material": "21.1.0-next.0+sha-4711d53",
292-
"@angular/material-experimental": "21.1.0-next.0+sha-4711d53",
293-
"@angular/material-luxon-adapter": "21.1.0-next.0+sha-4711d53",
294-
"@angular/material-date-fns-adapter": "21.1.0-next.0+sha-4711d53"
291+
"@angular/material": "21.1.0-next.0+sha-943e1e3",
292+
"@angular/material-experimental": "21.1.0-next.0+sha-943e1e3",
293+
"@angular/material-luxon-adapter": "21.1.0-next.0+sha-943e1e3",
294+
"@angular/material-date-fns-adapter": "21.1.0-next.0+sha-943e1e3"
295295
},
296296
"devDependencies": {
297297
"@angular/aria": "workspace:*",

0 commit comments

Comments
 (0)