From 7a2b62b0585a4212bb11019a93a4a31e13265569 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 10 Dec 2024 20:51:48 +0000 Subject: [PATCH] main - 0296713 fix(material/select): add opt-in input that allows selection of nullable options (#30142) --- docs-content/api-docs/material-select.html | 31 ++++++++++++ .../material/select/index-ts.html | 1 + .../select-selectable-null-example-html.html | 19 +++++++ .../select-selectable-null-example-ts.html | 21 ++++++++ .../examples-source/material/select/index.ts | 1 + .../select-selectable-null-example.html | 19 +++++++ .../select-selectable-null-example.ts | 21 ++++++++ .../overviews/material/select/select.html | 11 +++++ fesm2022/cdk/a11y.mjs | 2 +- fesm2022/cdk/a11y.mjs.map | 2 +- fesm2022/cdk/text-field.mjs | 2 +- fesm2022/cdk/text-field.mjs.map | 2 +- fesm2022/components-examples.mjs | 15 ++++++ fesm2022/components-examples.mjs.map | 2 +- fesm2022/material/form-field.mjs | 6 +-- fesm2022/material/form-field.mjs.map | 2 +- fesm2022/material/select.mjs | 49 +++++++++++++------ fesm2022/material/select.mjs.map | 2 +- fesm2022/material/sidenav.mjs | 2 +- fesm2022/material/sidenav.mjs.map | 2 +- fesm2022/material/snack-bar.mjs | 2 +- fesm2022/material/snack-bar.mjs.map | 2 +- fesm2022/material/tooltip.mjs | 4 +- fesm2022/material/tooltip.mjs.map | 2 +- material/select/index.d.ts | 14 ++++++ package.json | 16 +++--- 26 files changed, 211 insertions(+), 41 deletions(-) create mode 100755 docs-content/examples-highlighted/material/select/select-selectable-null/select-selectable-null-example-html.html create mode 100755 docs-content/examples-highlighted/material/select/select-selectable-null/select-selectable-null-example-ts.html create mode 100755 docs-content/examples-source/material/select/select-selectable-null/select-selectable-null-example.html create mode 100755 docs-content/examples-source/material/select/select-selectable-null/select-selectable-null-example.ts diff --git a/docs-content/api-docs/material-select.html b/docs-content/api-docs/material-select.html index 813eaa213b..e2f02acedf 100755 --- a/docs-content/api-docs/material-select.html +++ b/docs-content/api-docs/material-select.html @@ -77,6 +77,23 @@

+

+ canSelectNullableOptions: boolean +

+ +

Whether nullable options can be selected by default. +See MatSelect.canSelectNullableOptions for more information.

+ + + + + + +

disableOptionCentering: boolean diff --git a/docs-content/examples-highlighted/material/select/index-ts.html b/docs-content/examples-highlighted/material/select/index-ts.html index e4e2fcfade..8c7ffb8729 100755 --- a/docs-content/examples-highlighted/material/select/index-ts.html +++ b/docs-content/examples-highlighted/material/select/index-ts.html @@ -12,4 +12,5 @@ export {SelectValueBindingExample} from './select-value-binding/select-value-binding-example'; export {SelectReactiveFormExample} from './select-reactive-form/select-reactive-form-example'; export {SelectInitialValueExample} from './select-initial-value/select-initial-value-example'; +export {SelectSelectableNullExample} from './select-selectable-null/select-selectable-null-example'; export {SelectHarnessExample} from './select-harness/select-harness-example'; diff --git a/docs-content/examples-highlighted/material/select/select-selectable-null/select-selectable-null-example-html.html b/docs-content/examples-highlighted/material/select/select-selectable-null/select-selectable-null-example-html.html new file mode 100755 index 0000000000..4d354fdde9 --- /dev/null +++ b/docs-content/examples-highlighted/material/select/select-selectable-null/select-selectable-null-example-html.html @@ -0,0 +1,19 @@ +<h4>mat-select allowing selection of nullable options</h4> +<mat-form-field> + <mat-label>State</mat-label> + <mat-select [(ngModel)]="value" canSelectNullableOptions> + @for (option of options; track option) { + <mat-option [value]="option.value">{{option.label}}</mat-option> + } + </mat-select> +</mat-form-field> + +<h4>mat-select with default configuration</h4> +<mat-form-field> + <mat-label>State</mat-label> + <mat-select [(ngModel)]="value"> + @for (option of options; track option) { + <mat-option [value]="option.value">{{option.label}}</mat-option> + } + </mat-select> +</mat-form-field> diff --git a/docs-content/examples-highlighted/material/select/select-selectable-null/select-selectable-null-example-ts.html b/docs-content/examples-highlighted/material/select/select-selectable-null/select-selectable-null-example-ts.html new file mode 100755 index 0000000000..12afbd6628 --- /dev/null +++ b/docs-content/examples-highlighted/material/select/select-selectable-null/select-selectable-null-example-ts.html @@ -0,0 +1,21 @@ +import {Component} from '@angular/core'; +import {FormsModule} from '@angular/forms'; +import {MatInputModule} from '@angular/material/input'; +import {MatSelectModule} from '@angular/material/select'; +import {MatFormFieldModule} from '@angular/material/form-field'; + +/** @title Select with selectable null options */ +@Component({ + selector: 'select-selectable-null-example', + templateUrl: 'select-selectable-null-example.html', + imports: [MatFormFieldModule, MatSelectModule, MatInputModule, FormsModule], +}) +export class SelectSelectableNullExample { + value: number | null = null; + options = [ + {label: 'None', value: null}, + {label: 'One', value: 1}, + {label: 'Two', value: 2}, + {label: 'Three', value: 3}, + ]; +} diff --git a/docs-content/examples-source/material/select/index.ts b/docs-content/examples-source/material/select/index.ts index 698b773b35..594bd086b3 100755 --- a/docs-content/examples-source/material/select/index.ts +++ b/docs-content/examples-source/material/select/index.ts @@ -12,4 +12,5 @@ export {SelectResetExample} from './select-reset/select-reset-example'; export {SelectValueBindingExample} from './select-value-binding/select-value-binding-example'; export {SelectReactiveFormExample} from './select-reactive-form/select-reactive-form-example'; export {SelectInitialValueExample} from './select-initial-value/select-initial-value-example'; +export {SelectSelectableNullExample} from './select-selectable-null/select-selectable-null-example'; export {SelectHarnessExample} from './select-harness/select-harness-example'; diff --git a/docs-content/examples-source/material/select/select-selectable-null/select-selectable-null-example.html b/docs-content/examples-source/material/select/select-selectable-null/select-selectable-null-example.html new file mode 100755 index 0000000000..a1bc2340a5 --- /dev/null +++ b/docs-content/examples-source/material/select/select-selectable-null/select-selectable-null-example.html @@ -0,0 +1,19 @@ +

mat-select allowing selection of nullable options

+ + State + + @for (option of options; track option) { + {{option.label}} + } + + + +

mat-select with default configuration

+ + State + + @for (option of options; track option) { + {{option.label}} + } + + diff --git a/docs-content/examples-source/material/select/select-selectable-null/select-selectable-null-example.ts b/docs-content/examples-source/material/select/select-selectable-null/select-selectable-null-example.ts new file mode 100755 index 0000000000..a5b29834ca --- /dev/null +++ b/docs-content/examples-source/material/select/select-selectable-null/select-selectable-null-example.ts @@ -0,0 +1,21 @@ +import {Component} from '@angular/core'; +import {FormsModule} from '@angular/forms'; +import {MatInputModule} from '@angular/material/input'; +import {MatSelectModule} from '@angular/material/select'; +import {MatFormFieldModule} from '@angular/material/form-field'; + +/** @title Select with selectable null options */ +@Component({ + selector: 'select-selectable-null-example', + templateUrl: 'select-selectable-null-example.html', + imports: [MatFormFieldModule, MatSelectModule, MatInputModule, FormsModule], +}) +export class SelectSelectableNullExample { + value: number | null = null; + options = [ + {label: 'None', value: null}, + {label: 'One', value: 1}, + {label: 'Two', value: 2}, + {label: 'Three', value: 3}, + ]; +} diff --git a/docs-content/overviews/material/select/select.html b/docs-content/overviews/material/select/select.html index c8b783b278..e1c3f0027c 100755 --- a/docs-content/overviews/material/select/select.html +++ b/docs-content/overviews/material/select/select.html @@ -72,6 +72,17 @@ +

By default any options with a null or undefined value will reset the select's value. If instead +you want the nullable options to be selectable, you can enable the canSelectNullableOptions input. +The default value for the input can be controlled application-wide through the MAT_SELECT_CONFIG +injection token.

+
+ +