From fe0f0e8a49779388a60c9119daa6fcd93f8c9422 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 23 Aug 2022 18:20:14 +0200 Subject: [PATCH] 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`. --- src/material/legacy-radio/radio.spec.ts | 5 +++++ src/material/legacy-radio/radio.ts | 1 + src/material/radio/radio.spec.ts | 9 +++++++++ src/material/radio/radio.ts | 1 + 4 files changed, 16 insertions(+) diff --git a/src/material/legacy-radio/radio.spec.ts b/src/material/legacy-radio/radio.spec.ts index 2cca2514c4b0..a27f239eb8c3 100644 --- a/src/material/legacy-radio/radio.spec.ts +++ b/src/material/legacy-radio/radio.spec.ts @@ -68,6 +68,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(); diff --git a/src/material/legacy-radio/radio.ts b/src/material/legacy-radio/radio.ts index 199ad7fcf739..63fb259356b1 100644 --- a/src/material/legacy-radio/radio.ts +++ b/src/material/legacy-radio/radio.ts @@ -87,6 +87,7 @@ export class MatLegacyRadioGroup extends _MatRadioGroupBase { } }); + 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(); @@ -821,6 +826,10 @@ describe('MDC-based 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', () => { diff --git a/src/material/radio/radio.ts b/src/material/radio/radio.ts index cfe488b38fcf..baf619af4d3f 100644 --- a/src/material/radio/radio.ts +++ b/src/material/radio/radio.ts @@ -685,6 +685,7 @@ export class MatRadioGroup extends _MatRadioGroupBase { '[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.