Skip to content

Commit

Permalink
fix(material/radio): clear names from host nodes
Browse files Browse the repository at this point in the history
Along the same lines as angular#15368. Clears the `name` from the host node of the radio button and radio group, because they end up being forwarded to the underlying `input` and can cause double results when using something like `getElementsByName`.
  • Loading branch information
crisbeto committed Mar 7, 2022
1 parent 92863cc commit bbbc038
Show file tree
Hide file tree
Showing 4 changed files with 18 additions and 0 deletions.
5 changes: 5 additions & 0 deletions src/material-experimental/mdc-radio/radio.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,11 @@ describe('MDC-based MatRadio', () => {
}
});

it('should clear the name attribute from the radio group host node', () => {
expect(groupInstance.name).toBeTruthy();
expect(groupDebugElement.nativeElement.getAttribute('name')).toBeFalsy();
});

it('should coerce the disabled binding on the radio group', () => {
(groupInstance as any).disabled = '';
fixture.detectChanges();
Expand Down
2 changes: 2 additions & 0 deletions src/material-experimental/mdc-radio/radio.ts
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ export const MAT_RADIO_GROUP = new InjectionToken<_MatRadioGroupBase<_MatRadioBu
host: {
'role': 'radiogroup',
'class': 'mat-mdc-radio-group',
'[attr.name]': 'null',
},
})
export class MatRadioGroup extends _MatRadioGroupBase<MatRadioButton> {
Expand All @@ -96,6 +97,7 @@ export class MatRadioGroup extends _MatRadioGroupBase<MatRadioButton> {
'[attr.aria-label]': 'null',
'[attr.aria-labelledby]': 'null',
'[attr.aria-describedby]': 'null',
'[attr.name]': 'null',
// Note: under normal conditions focus shouldn't land on this element, however it may be
// programmatically set, for example inside of a focus trap, in this case we want to forward
// the focus to the native element.
Expand Down
9 changes: 9 additions & 0 deletions src/material/radio/radio.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,11 @@ describe('MatRadio', () => {
}
});

it('should clear the name attribute from the radio group host node', () => {
expect(groupInstance.name).toBeTruthy();
expect(groupDebugElement.nativeElement.getAttribute('name')).toBeFalsy();
});

it('should coerce the disabled binding on the radio group', () => {
(groupInstance as any).disabled = '';
fixture.detectChanges();
Expand Down Expand Up @@ -781,6 +786,10 @@ describe('MatRadio', () => {
it('should default the radio color to `accent`', () => {
expect(seasonRadioInstances.every(radio => radio.color === 'accent')).toBe(true);
});

it('should clear the name attribute from the radio host node', () => {
expect(radioDebugElements.every(el => !el.nativeElement.getAttribute('name'))).toBe(true);
});
});

describe('with tabindex', () => {
Expand Down
2 changes: 2 additions & 0 deletions src/material/radio/radio.ts
Original file line number Diff line number Diff line change
Expand Up @@ -335,6 +335,7 @@ export abstract class _MatRadioGroupBase<T extends _MatRadioButtonBase>
host: {
'role': 'radiogroup',
'class': 'mat-radio-group',
'[attr.name]': 'null',
},
})
export class MatRadioGroup extends _MatRadioGroupBase<MatRadioButton> {
Expand Down Expand Up @@ -655,6 +656,7 @@ export abstract class _MatRadioButtonBase
'[attr.aria-label]': 'null',
'[attr.aria-labelledby]': 'null',
'[attr.aria-describedby]': 'null',
'[attr.name]': 'null',
// Note: under normal conditions focus shouldn't land on this element, however it may be
// programmatically set, for example inside of a focus trap, in this case we want to forward
// the focus to the native element.
Expand Down

0 comments on commit bbbc038

Please sign in to comment.