Skip to content

Commit 225cbc8

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 c5a32c2 commit 225cbc8

File tree

2 files changed

+11
-0
lines changed

2 files changed

+11
-0
lines changed

src/lib/radio/radio.spec.ts

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

66+
it('should clear the name attribute from the radio group host node', () => {
67+
expect(groupInstance.name).toBeTruthy();
68+
expect(groupDebugElement.nativeElement.getAttribute('name')).toBeFalsy();
69+
});
70+
6671
it('should coerce the disabled binding on the radio group', () => {
6772
(groupInstance as any).disabled = '';
6873
fixture.detectChanges();
@@ -702,6 +707,10 @@ describe('MatRadio', () => {
702707
expect(radio.hasAttribute('name')).toBe(false);
703708
});
704709

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

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

src/lib/radio/radio.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ export class MatRadioChange {
7878
host: {
7979
'role': 'radiogroup',
8080
'class': 'mat-radio-group',
81+
'[attr.name]': 'null',
8182
},
8283
})
8384
export class MatRadioGroup implements AfterContentInit, ControlValueAccessor {
@@ -325,6 +326,7 @@ export const _MatRadioButtonMixinBase:
325326
// Needs to be -1 so the `focus` event still fires.
326327
'[attr.tabindex]': '-1',
327328
'[attr.id]': 'id',
329+
'[attr.name]': 'null',
328330
// Note: under normal conditions focus shouldn't land on this element, however it may be
329331
// programmatically set, for example inside of a focus trap, in this case we want to forward
330332
// the focus to the native element.

0 commit comments

Comments
 (0)