fix(radio): deselect button if value doesn't match up with the group anymore #14734

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Open

crisbeto wants to merge 1 commit into angular:main

from crisbeto:radio-selected-button-value-change

Open

fix(radio): deselect button if value doesn't match up with the group anymore #14734

crisbeto wants to merge 1 commit into angular:main from crisbeto:radio-selected-button-value-change

Conversation

crisbeto

Copy link

Member

@crisbeto crisbeto commented Jan 5, 2019

Handles the case where a radio button is selected and then its value is changed to something that doesn't match up with the group anymore.

@crisbeto crisbeto added the target: patch label

Jan 5, 2019

@crisbeto crisbeto assigned devversion

Jan 5, 2019

@crisbeto crisbeto requested review from devversion and jelbourn as code owners

January 5, 2019 15:43

@googlebot googlebot added the cla: yes label

Jan 5, 2019

devversion

devversion previously approved these changes

Jan 5, 2019

View reviewed changes

Copy link

Member

@devversion devversion left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@devversion devversion added pr: lgtm action: merge labels

Jan 5, 2019

jelbourn

jelbourn previously approved these changes

Jan 8, 2019

View reviewed changes

Copy link

Member

@jelbourn jelbourn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

crisbeto added a commit to crisbeto/material2 that referenced this pull request

Jan 11, 2019

@crisbeto


 fix(list): deselect option if value doesn't match up

16e9e64

Along the same lines as angular#14734. Deselects a selected list option, if its value is changed to something that doesn't match up with the group.

@crisbeto crisbeto mentioned this pull request

Jan 11, 2019

fix(list): deselect option if value doesn't match up #14800

Merged

vivian-hu-zz pushed a commit that referenced this pull request

Jan 17, 2019

@crisbeto @vivian-hu-zz


 fix(list): deselect option if value doesn't match up ( #14800 )

551ded5

Along the same lines as #14734. Deselects a selected list option, if its value is changed to something that doesn't match up with the group.

s2-abdo pushed a commit to s2-abdo/material2 that referenced this pull request

Jan 18, 2019

@crisbeto


 fix(list): deselect option if value doesn't match up ( angular#14800 )

b2c2966

Along the same lines as angular#14734. Deselects a selected list option, if its value is changed to something that doesn't match up with the group.

vivian-hu-zz pushed a commit that referenced this pull request

Jan 18, 2019

@crisbeto


 fix(list): deselect option if value doesn't match up ( #14800 )

Along the same lines as #14734. Deselects a selected list option, if its value is changed to something that doesn't match up with the group.

@jelbourn jelbourn added ༼ つ ◕_◕ ༽つ and removed ༼ つ ◕_◕ ༽つ labels

Apr 25, 2019

@mmalerba mmalerba added aaa and removed aaa labels

Apr 25, 2019

@crisbeto


 fix(radio): deselect button if value doesn't match up with the group ...

5a29a88

...anymore
Handles the case where a radio button is selected and then its value is changed to something that doesn't match up with the group anymore.

@crisbeto crisbeto force-pushed the radio-selected-button-value-change branch from 645e63d to 5a29a88 Compare

June 20, 2019 20:57

@crisbeto crisbeto added the P4 label

Jun 20, 2019

@mmalerba mmalerba removed the lgtm label

Jul 31, 2020

@andrewseguin andrewseguin removed the cla: yes label

Dec 29, 2021

@andrewseguin

Copy link

Contributor

andrewseguin commented Feb 22, 2022

This change depends on the order Angular sets the button's checked and value properties. When checked is set before value, both the group and button will have a null value and never be selected. However, when value is set first, the evaluation shows that group's value is null and the button has a value so it sets it.

You can test it by comparing the group value between these two cases:

<!-- No button will be selected since the checked setter was called first and it found that the group and buttons all have null values -->
<mat-radio-group>
 <mat-radio-button checked value="1"> Option 1 </mat-radio-button>
 <mat-radio-button value="2"> Option 2 </mat-radio-button>
 <mat-radio-button value="3"> Option 3 </mat-radio-button>
</mat-radio-group>
<!-- The first button will be selected because checked will update the group based on the first button's value -->
<mat-radio-group>
 <mat-radio-button value="1" checked> Option 1 </mat-radio-button>
 <mat-radio-button value="2"> Option 2 </mat-radio-button>
 <mat-radio-button value="3"> Option 3 </mat-radio-button>
</mat-radio-group>