Skip to content

Commit

Permalink
fix(button-toggle): clear name from host node
Browse files Browse the repository at this point in the history
Along the same lines as angular#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.
  • Loading branch information
crisbeto committed Mar 31, 2019
1 parent b72c1b7 commit f09df73
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 1 deletion.
17 changes: 16 additions & 1 deletion src/lib/button-toggle/button-toggle.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -224,6 +224,7 @@ describe('MatButtonToggle without forms', () => {
ButtonToggleWithAriaLabelledby,
RepeatedButtonTogglesWithPreselectedValue,
ButtonToggleWithTabindex,
ButtonToggleWithStaticName,
],
});

Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -951,3 +962,7 @@ class RepeatedButtonTogglesWithPreselectedValue {
})
class ButtonToggleWithTabindex {}

@Component({
template: `<mat-button-toggle name="custom-name"></mat-button-toggle>`
})
class ButtonToggleWithStaticName {}
1 change: 1 addition & 0 deletions src/lib/button-toggle/button-toggle.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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()',
}
})
Expand Down

0 comments on commit f09df73

Please sign in to comment.