Skip to content

Commit b8735c0

Browse files
committed
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.
1 parent 3712b8f commit b8735c0

File tree

2 files changed

+17
-1
lines changed

2 files changed

+17
-1
lines changed

src/material/button-toggle/button-toggle.spec.ts

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -224,6 +224,7 @@ describe('MatButtonToggle without forms', () => {
224224
ButtonToggleWithAriaLabelledby,
225225
RepeatedButtonTogglesWithPreselectedValue,
226226
ButtonToggleWithTabindex,
227+
ButtonToggleWithStaticName,
227228
],
228229
});
229230

@@ -736,7 +737,7 @@ describe('MatButtonToggle without forms', () => {
736737
});
737738
});
738739

739-
describe('with tabindex ', () => {
740+
describe('with tabindex', () => {
740741
it('should forward the tabindex to the underlying button', () => {
741742
const fixture = TestBed.createComponent(ButtonToggleWithTabindex);
742743
fixture.detectChanges();
@@ -778,6 +779,16 @@ describe('MatButtonToggle without forms', () => {
778779
expect(fixture.componentInstance.toggles.toArray()[1].checked).toBe(true);
779780
});
780781

782+
it('should not throw on init when toggles are repeated and there is an initial value', () => {
783+
const fixture = TestBed.createComponent(ButtonToggleWithStaticName);
784+
fixture.detectChanges();
785+
786+
const hostNode: HTMLElement = fixture.nativeElement.querySelector('.mat-button-toggle');
787+
788+
expect(hostNode.hasAttribute('name')).toBe(false);
789+
expect(hostNode.querySelector('button')!.getAttribute('name')).toBe('custom-name');
790+
});
791+
781792
it('should maintain the selected state when the value and toggles are swapped out at ' +
782793
'the same time', () => {
783794
const fixture = TestBed.createComponent(RepeatedButtonTogglesWithPreselectedValue);
@@ -951,3 +962,7 @@ class RepeatedButtonTogglesWithPreselectedValue {
951962
})
952963
class ButtonToggleWithTabindex {}
953964

965+
@Component({
966+
template: `<mat-button-toggle name="custom-name"></mat-button-toggle>`
967+
})
968+
class ButtonToggleWithStaticName {}

src/material/button-toggle/button-toggle.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -372,6 +372,7 @@ const _MatButtonToggleMixinBase: CanDisableRippleCtor & typeof MatButtonToggleBa
372372
// but can still receive focus from things like cdkFocusInitial.
373373
'[attr.tabindex]': '-1',
374374
'[attr.id]': 'id',
375+
'[attr.name]': 'null',
375376
'(focus)': 'focus()',
376377
}
377378
})

0 commit comments

Comments
 (0)