search

angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.32k stars 6.73k forks source link

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

Open mcalmus opened 2 years ago

mcalmus commented 2 years ago

Is this a regression?

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

kush-savani commented 2 years ago

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

mcalmus commented 2 years ago

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

zakhenry commented 2 years ago

@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 commented 1 year ago

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

kush-savani commented 1 year ago

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 commented 1 year ago

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 commented 7 months ago

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.