From b8735c0b02b53967e156db6dffed8da8389f910a Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sun, 31 Mar 2019 22:20:26 +0200
Subject: [PATCH] fix(button-toggle): clear name from host node

Along the same lines as #15368. Since we forward the `name` to the underlying native inside a button toggle, otherwise the results from `document.getElementsByName` or Protractor's `By.name` might be thrown off.
---
 .../button-toggle/button-toggle.spec.ts         | 17 ++++++++++++++++-
 src/material/button-toggle/button-toggle.ts     |  1 +
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/material/button-toggle/button-toggle.spec.ts b/src/material/button-toggle/button-toggle.spec.ts
index 13c37bded024..7c06020717f5 100644
--- a/src/material/button-toggle/button-toggle.spec.ts
+++ b/src/material/button-toggle/button-toggle.spec.ts
@@ -224,6 +224,7 @@ describe('MatButtonToggle without forms', () => {
         ButtonToggleWithAriaLabelledby,
         RepeatedButtonTogglesWithPreselectedValue,
         ButtonToggleWithTabindex,
+        ButtonToggleWithStaticName,
       ],
     });
 
@@ -736,7 +737,7 @@ describe('MatButtonToggle without forms', () => {
     });
   });
 
-  describe('with tabindex ', () => {
+  describe('with tabindex', () => {
     it('should forward the tabindex to the underlying button', () => {
       const fixture = TestBed.createComponent(ButtonToggleWithTabindex);
       fixture.detectChanges();
@@ -778,6 +779,16 @@ describe('MatButtonToggle without forms', () => {
     expect(fixture.componentInstance.toggles.toArray()[1].checked).toBe(true);
   });
 
+  it('should not throw on init when toggles are repeated and there is an initial value', () => {
+    const fixture = TestBed.createComponent(ButtonToggleWithStaticName);
+    fixture.detectChanges();
+
+    const hostNode: HTMLElement = fixture.nativeElement.querySelector('.mat-button-toggle');
+
+    expect(hostNode.hasAttribute('name')).toBe(false);
+    expect(hostNode.querySelector('button')!.getAttribute('name')).toBe('custom-name');
+  });
+
   it('should maintain the selected state when the value and toggles are swapped out at ' +
     'the same time', () => {
       const fixture = TestBed.createComponent(RepeatedButtonTogglesWithPreselectedValue);
@@ -951,3 +962,7 @@ class RepeatedButtonTogglesWithPreselectedValue {
 })
 class ButtonToggleWithTabindex {}
 
+@Component({
+  template: `<mat-button-toggle name="custom-name"></mat-button-toggle>`
+})
+class ButtonToggleWithStaticName {}
diff --git a/src/material/button-toggle/button-toggle.ts b/src/material/button-toggle/button-toggle.ts
index 399359d0328b..3c90582a9eee 100644
--- a/src/material/button-toggle/button-toggle.ts
+++ b/src/material/button-toggle/button-toggle.ts
@@ -372,6 +372,7 @@ const _MatButtonToggleMixinBase: CanDisableRippleCtor & typeof MatButtonToggleBa
     // but can still receive focus from things like cdkFocusInitial.
     '[attr.tabindex]': '-1',
     '[attr.id]': 'id',
+    '[attr.name]': 'null',
     '(focus)': 'focus()',
   }
 })