components
components copied to clipboard
angular
bug(MatButtonToggle): Button with undefined or null value not selected by default
Is this a regression?
- [ ] Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
No response
Description
If one of the buttons in a button toggle group has an unknown or null value in a template-driven page, that button is not selected at page load. Any other default value works fine.
Reproduction
https://stackblitz.com/edit/angular-1hthwq-eq6mud?file=src%2Fapp%2Fbutton-toggle-forms-example.ts,src%2Fapp%2Fbutton-toggle-forms-example.html
This stackblitz example is a fork of the MatButtonToggle example. It adds a "null" value to the set of options and sets that as the default for the model, but the corresponding button is selected only if explicitly chosen.
Expected Behavior
Button corresponding to null value should be selected on page load.
Actual Behavior
No button is chosen on page load.
Environment
- Angular:
- CDK/Material:
- Browser(s):
- Operating System (e.g. Windows, macOS, Ubuntu):
@crisbeto hello, is this actual issue? if yes, can you please assign this to me if possible!
It seems like this line could be (at least part of) the problem:
https://github.com/angular/components/blob/fd5afe7038ad8d69648eaae80c7f07ac71f3a4c8/src/material/button-toggle/button-toggle.ts#L362
@kush-savani yep this is an actual issue, and note that this behaviour is inconsistent with mat-radio-button - there is no null check on the value of the radio buttons for selection.
Hello @andrewseguin, FYI: There is no null check on the value of the mat-radio-button for selection. Code-ref Here is demo of radio-button: https://stackblitz.com/edit/1alcsb-qssszv
Hello @andrewseguin, FYI: There is no null check on the value of the mat-radio-button for selection. Code-ref Here is demo of radio-button: https://stackblitz.com/edit/1alcsb-qssszv
Hello @andrewseguin, I need your input on this issue.
It's not obvious to me why null should be a supported value.
Why would it not be a supported value? The paragraph style from the original post is a perfect example of why it would be valid. I just stumbled upon this problem, too, in my case with a nullable boolean (yes / no / n.a.). A select did not feel like the right control to use, but now I will have to convert the value to a string and back.
