Skip to content

Commit a6b2616

Browse files
committed
fix(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 d29df38 commit a6b2616

File tree

2 files changed

+11
-0
lines changed

2 files changed

+11
-0
lines changed

src/material/radio/radio.spec.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,11 @@ describe('MatRadio', () => {
6565
}
6666
});
6767

68+
it('should clear the name attribute from the radio group host node', () => {
69+
expect(groupInstance.name).toBeTruthy();
70+
expect(groupDebugElement.nativeElement.getAttribute('name')).toBeFalsy();
71+
});
72+
6873
it('should coerce the disabled binding on the radio group', () => {
6974
(groupInstance as any).disabled = '';
7075
fixture.detectChanges();
@@ -727,6 +732,10 @@ describe('MatRadio', () => {
727732
expect(seasonRadioInstances.every(radio => radio.color === 'accent')).toBe(true);
728733
});
729734

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

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

src/material/radio/radio.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@ export class MatRadioChange {
9393
host: {
9494
'role': 'radiogroup',
9595
'class': 'mat-radio-group',
96+
'[attr.name]': 'null',
9697
},
9798
})
9899
export class MatRadioGroup implements AfterContentInit, ControlValueAccessor {
@@ -346,6 +347,7 @@ const _MatRadioButtonMixinBase:
346347
// Needs to be -1 so the `focus` event still fires.
347348
'[attr.tabindex]': '-1',
348349
'[attr.id]': 'id',
350+
'[attr.name]': 'null',
349351
// Note: under normal conditions focus shouldn't land on this element, however it may be
350352
// programmatically set, for example inside of a focus trap, in this case we want to forward
351353
// the focus to the native element.

0 commit comments

Comments
 (0)