Skip to content

Commit

Permalink
main - 00515ad docs: clear input field whenever a selection is (#30396)
Browse files Browse the repository at this point in the history
  • Loading branch information
@naaajii
naaajii committed Jan 31, 2025
1 parent 5127013 commit abf10b8
Show file tree
Hide file tree
Showing 5 changed files with 13 additions and 13 deletions.
2 changes: 1 addition & 1 deletion ...amples-highlighted/material/chips/chips-autocomplete/chips-autocomplete-example-html.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
[<span class="hljs-attr">matChipInputSeparatorKeyCodes</span>]=<span class="hljs-string">&quot;separatorKeysCodes&quot;</span>
(<span class="hljs-attr">matChipInputTokenEnd</span>)=<span class="hljs-string">&quot;add($event)&quot;</span>
/&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">mat-autocomplete</span> #<span class="hljs-attr">auto</span>=<span class="hljs-string">&quot;matAutocomplete&quot;</span> (<span class="hljs-attr">optionSelected</span>)=<span class="hljs-string">&quot;selected($event)&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">mat-autocomplete</span> #<span class="hljs-attr">auto</span>=<span class="hljs-string">&quot;matAutocomplete&quot;</span> (<span class="hljs-attr">optionSelected</span>)=<span class="hljs-string">&quot;selected($event); fruitInput.value = &#x27;&#x27;&quot;</span>&gt;</span>
@for (fruit of filteredFruits(); track fruit) {
<span class="hljs-tag">&lt;<span class="hljs-name">mat-option</span> [<span class="hljs-attr">value</span>]=<span class="hljs-string">&quot;fruit&quot;</span>&gt;</span>{{fruit}}<span class="hljs-tag">&lt;/<span class="hljs-name">mat-option</span>&gt;</span>
}
Expand Down
2 changes: 1 addition & 1 deletion ...content/examples-source/material/chips/chips-autocomplete/chips-autocomplete-example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
(matChipInputTokenEnd)="add($event)"
/>
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event); fruitInput.value = ''">
@for (fruit of filteredFruits(); track fruit) {
<mat-option [value]="fruit">{{fruit}}</mat-option>
}
Expand Down
4 changes: 2 additions & 2 deletions fesm2022/material/chips.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,11 +58,11 @@ class ChipsAutocompleteExample {
event.option.deselect();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ChipsAutocompleteExample, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.3", type: ChipsAutocompleteExample, isStandalone: true, selector: "chips-autocomplete-example", inputs: { currentFruit: { classPropertyName: "currentFruit", publicName: "currentFruit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentFruit: "currentFruitChange" }, ngImport: i0, 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)\">\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", styles: [".example-chip-list {\n width: 100%;\n}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.3", type: ChipsAutocompleteExample, isStandalone: true, selector: "chips-autocomplete-example", inputs: { currentFruit: { classPropertyName: "currentFruit", publicName: "currentFruit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentFruit: "currentFruitChange" }, ngImport: i0, 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", styles: [".example-chip-list {\n width: 100%;\n}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ChipsAutocompleteExample, decorators: [{
type: Component,
args: [{ selector: 'chips-autocomplete-example', imports: [MatFormFieldModule, MatChipsModule, MatIconModule, MatAutocompleteModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, 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)\">\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", styles: [".example-chip-list {\n width: 100%;\n}\n"] }]
args: [{ selector: 'chips-autocomplete-example', imports: [MatFormFieldModule, MatChipsModule, MatIconModule, MatAutocompleteModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, 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", styles: [".example-chip-list {\n width: 100%;\n}\n"] }]
}] });

/**
Expand Down
2 changes: 1 addition & 1 deletion fesm2022/material/chips.mjs.map
View file

Large diffs are not rendered by default.

16 changes: 8 additions & 8 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@angular/components-examples",
"version": "19.2.0-next.2+sha-151ff1a",
"version": "19.2.0-next.2+sha-00515ad",
"description": "Angular Components Examples",
"private": true,
"repository": {
Expand Down Expand Up @@ -259,15 +259,15 @@
},
"homepage": "https://github.com/angular/components#readme",
"peerDependencies": {
"@angular/cdk": "19.2.0-next.2+sha-151ff1a",
"@angular/cdk-experimental": "19.2.0-next.2+sha-151ff1a",
"@angular/cdk": "19.2.0-next.2+sha-00515ad",
"@angular/cdk-experimental": "19.2.0-next.2+sha-00515ad",
"@angular/core": "^19.0.0-0 || ^19.1.0-0 || ^19.2.0-0 || ^19.3.0-0 || ^20.0.0-0",
"@angular/common": "^19.0.0-0 || ^19.1.0-0 || ^19.2.0-0 || ^19.3.0-0 || ^20.0.0-0",
"@angular/material": "19.2.0-next.2+sha-151ff1a",
"@angular/material-experimental": "19.2.0-next.2+sha-151ff1a",
"@angular/material-moment-adapter": "19.2.0-next.2+sha-151ff1a",
"@angular/material-luxon-adapter": "19.2.0-next.2+sha-151ff1a",
"@angular/material-date-fns-adapter": "19.2.0-next.2+sha-151ff1a"
"@angular/material": "19.2.0-next.2+sha-00515ad",
"@angular/material-experimental": "19.2.0-next.2+sha-00515ad",
"@angular/material-moment-adapter": "19.2.0-next.2+sha-00515ad",
"@angular/material-luxon-adapter": "19.2.0-next.2+sha-00515ad",
"@angular/material-date-fns-adapter": "19.2.0-next.2+sha-00515ad"
},
"dependencies": {
"tslib": "^2.3.0"
Expand Down

0 comments on commit abf10b8

Please sign in to comment.