Skip to content

Commit bbbc038

Browse files
committed
fix(material/radio): clear names from host nodes
Along the same lines as #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`.
1 parent 92863cc commit bbbc038

File tree

4 files changed

+18
-0
lines changed

4 files changed

+18
-0
lines changed

src/material-experimental/mdc-radio/radio.spec.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,11 @@ describe('MDC-based MatRadio', () => {
7979
}
8080
});
8181

82+
it('should clear the name attribute from the radio group host node', () => {
83+
expect(groupInstance.name).toBeTruthy();
84+
expect(groupDebugElement.nativeElement.getAttribute('name')).toBeFalsy();
85+
});
86+
8287
it('should coerce the disabled binding on the radio group', () => {
8388
(groupInstance as any).disabled = '';
8489
fixture.detectChanges();

src/material-experimental/mdc-radio/radio.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ export const MAT_RADIO_GROUP = new InjectionToken<_MatRadioGroupBase<_MatRadioBu
7272
host: {
7373
'role': 'radiogroup',
7474
'class': 'mat-mdc-radio-group',
75+
'[attr.name]': 'null',
7576
},
7677
})
7778
export class MatRadioGroup extends _MatRadioGroupBase<MatRadioButton> {
@@ -96,6 +97,7 @@ export class MatRadioGroup extends _MatRadioGroupBase<MatRadioButton> {
9697
'[attr.aria-label]': 'null',
9798
'[attr.aria-labelledby]': 'null',
9899
'[attr.aria-describedby]': 'null',
100+
'[attr.name]': 'null',
99101
// Note: under normal conditions focus shouldn't land on this element, however it may be
100102
// programmatically set, for example inside of a focus trap, in this case we want to forward
101103
// the focus to the native element.

src/material/radio/radio.spec.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,11 @@ describe('MatRadio', () => {
7171
}
7272
});
7373

74+
it('should clear the name attribute from the radio group host node', () => {
75+
expect(groupInstance.name).toBeTruthy();
76+
expect(groupDebugElement.nativeElement.getAttribute('name')).toBeFalsy();
77+
});
78+
7479
it('should coerce the disabled binding on the radio group', () => {
7580
(groupInstance as any).disabled = '';
7681
fixture.detectChanges();
@@ -781,6 +786,10 @@ describe('MatRadio', () => {
781786
it('should default the radio color to `accent`', () => {
782787
expect(seasonRadioInstances.every(radio => radio.color === 'accent')).toBe(true);
783788
});
789+
790+
it('should clear the name attribute from the radio host node', () => {
791+
expect(radioDebugElements.every(el => !el.nativeElement.getAttribute('name'))).toBe(true);
792+
});
784793
});
785794

786795
describe('with tabindex', () => {

src/material/radio/radio.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -335,6 +335,7 @@ export abstract class _MatRadioGroupBase<T extends _MatRadioButtonBase>
335335
host: {
336336
'role': 'radiogroup',
337337
'class': 'mat-radio-group',
338+
'[attr.name]': 'null',
338339
},
339340
})
340341
export class MatRadioGroup extends _MatRadioGroupBase<MatRadioButton> {
@@ -655,6 +656,7 @@ export abstract class _MatRadioButtonBase
655656
'[attr.aria-label]': 'null',
656657
'[attr.aria-labelledby]': 'null',
657658
'[attr.aria-describedby]': 'null',
659+
'[attr.name]': 'null',
658660
// Note: under normal conditions focus shouldn't land on this element, however it may be
659661
// programmatically set, for example inside of a focus trap, in this case we want to forward
660662
// the focus to the native element.

0 commit comments

Comments
 (0)