diff --git a/src/lib/button-toggle/button-toggle.spec.ts b/src/lib/button-toggle/button-toggle.spec.ts index b27ded3acfd7..ae20a6cd8970 100644 --- a/src/lib/button-toggle/button-toggle.spec.ts +++ b/src/lib/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: `` +}) +class ButtonToggleWithStaticName {} diff --git a/src/lib/button-toggle/button-toggle.ts b/src/lib/button-toggle/button-toggle.ts index 282d1fe74dcc..5850571e1a74 100644 --- a/src/lib/button-toggle/button-toggle.ts +++ b/src/lib/button-toggle/button-toggle.ts @@ -372,6 +372,7 @@ export const _MatButtonToggleMixinBase: CanDisableRippleCtor & typeof MatButtonT // but can still receive focus from things like cdkFocusInitial. '[attr.tabindex]': '-1', '[attr.id]': 'id', + '[attr.name]': 'null', '(focus)': 'focus()', } })