Description
Reproduction
The following code in a template:
<mat-select
[matTooltip]="$any(select.selected)?.viewValue"
#select>
</mat-select>
results in the JS error below:
core.umd.js:6824 ERROR TypeError: Cannot read property 'selected' of undefined
at MatSelect.get (material-select.umd.js:870)
at ExampleComponent_Template (VM322 example-component.ts:18)
at executeTemplate (core.umd.js:10101)
at refreshView (core.umd.js:9967)
at refreshComponent (core.umd.js:11140)
at refreshChildComponents (core.umd.js:9763)
at refreshView (core.umd.js:10017)
at renderComponentOrTemplate (core.umd.js:10081)
at tickRootContext (core.umd.js:11314)
at detectChangesInRootView (core.umd.js:11339)
Stackblitz repro: https://stackblitz.com/edit/components-issue-8aohka?file=src%2Fapp%2Fexample-component.html
The problem is coming from this code:
components/src/material/select/select.ts
Lines 626 to 628 in 8424209
where the this._selectionModel
is undefined
when we try to access it. There is an empty
function which checks for the `` presence:
components/src/material/select/select.ts
Lines 764 to 766 in 8424209
The empty
function is used as a guard in some other internal functions in MatSelect
, so it can probably be added to the selected
getter too. However the signature of the selected
getter (MatOption | MatOption[]
) doesn't account for the fact that there might be no selected option at all, so this would likely be a breaking change (from types perspective, since it's a public API).
The issue was originally reported internally (internal reference).