Skip to content

Commit 84c55ba

Browse files
committed
add troubleshooting section for select
1 parent 8e7a8c6 commit 84c55ba

File tree

1 file changed

+31
-0
lines changed

1 file changed

+31
-0
lines changed

src/lib/select/select.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,12 +119,43 @@ globally cause input errors to show when the input is dirty and invalid.
119119
```
120120

121121
### Keyboard interaction
122+
122123
- <kbd>DOWN_ARROW</kbd>: Focus next option
123124
- <kbd>UP_ARROW</kbd>: Focus previous option
124125
- <kbd>ENTER</kbd> or <kbd>SPACE</kbd>: Select focused item
125126

126127
### Accessibility
128+
127129
The select component without text or label should be given a meaningful label via
128130
`aria-label` or `aria-labelledby`.
129131

130132
The select component has `role="listbox"` and options inside select have `role="option"`.
133+
134+
### Troubleshooting
135+
136+
#### Error: Cannot change `multiple` mode of select after initialization
137+
138+
This error is thrown if you attempt to bind the `multiple` property on `<mat-select>` to a dynamic
139+
value. (e.g. `[multiple]="isMultiple"` where the value of `isMultiple` changes over the course of
140+
the component's lifetime). If you need to change this dynamically, use `ngIf` or `ngSwitch` instead:
141+
142+
```html
143+
<mat-select *ngIf="isMultiple" multiple>
144+
...
145+
</mat-select>
146+
<mat-select *ngIf="!isMultiple">
147+
...
148+
</mat-select>
149+
```
150+
151+
#### Error: Cannot assign truthy non-array value to select in `multiple` mode
152+
153+
This error is thrown if you attempt to assign a value other than `null`, `undefined`, or an array to
154+
a `<mat-select multiple>`. For example, something like `mySelect.value = 'option1'`. What you likely
155+
meant to do was `mySelect.value = ['option1']`.
156+
157+
#### Error: Cannot assign a non-function value to `compareWith`
158+
159+
This error occurs if you attempt to assign something other than a function to the `compareWith`
160+
property. For more information on proper usage of `compareWith` see the
161+
[angular forms documentation](https://angular.io/api/forms/SelectControlValueAccessor#caveat-option-selection)).

0 commit comments

Comments
 (0)