bug(MatButtonToggle): Button with undefined or null value not selected by default

[mcalmus]

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):

[kush-savani]

@crisbeto hello, is this actual issue? if yes, can you please assign this to me if possible!

[mcalmus]

It seems like this line could be (at least part of) the problem:

components/src/material/button-toggle/button-toggle.ts

Line 362 in fd5afe7

return toggle.value != null && toggle.value === value;

[zakhenry]

@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.

[andrewseguin]

It's not obvious to me why null should be a supported value.

[kush-savani]

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

[kush-savani]

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.

[BaerMitUmlaut]

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.

[aukarelin]

It seems the following workaround (set "checked" explicitly) works fine:

<mat-button-toggle-group [formControl]="control">
    <mat-button-toggle [value]="null" [checked]="control.value === null">
        None
    </mat-button-toggle>
</mat-button-toggle-group>