Skip to content

Commit

Permalink
fix(radio): host element unable to receive focus events
Browse files Browse the repository at this point in the history
In #13323 we started clearing the `tabindex` from the `host` element in order to avoid having two elements with the same `tabindex` when the consumer sets a custom `tabindex`. As a result, the `mat-radio-button` can no longer receive focus and forward it to the `input`. These changes always reset the `tabindex` to -1 so the element is focusable, but not tabbable.

Fixes #13953.
  • Loading branch information
crisbeto committed Nov 3, 2018
1 parent 76044e8 commit e91f0a1
Show file tree
Hide file tree
Showing 2 changed files with 3 additions and 2 deletions.
2 changes: 1 addition & 1 deletion src/lib/radio/radio.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -723,7 +723,7 @@ describe('MatRadio', () => {
const radioButtonEl =
predefinedFixture.debugElement.query(By.css('.mat-radio-button')).nativeElement;

expect(radioButtonEl.getAttribute('tabindex')).toBeFalsy();
expect(radioButtonEl.getAttribute('tabindex')).toBe('-1');
});

});
Expand Down
3 changes: 2 additions & 1 deletion src/lib/radio/radio.ts
Original file line number Diff line number Diff line change
Expand Up @@ -336,7 +336,8 @@ export const _MatRadioButtonMixinBase:
'[class.mat-radio-checked]': 'checked',
'[class.mat-radio-disabled]': 'disabled',
'[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
'[attr.tabindex]': 'null',
// Needs to be -1 so the `focus` event still fires.
'[attr.tabindex]': '-1',
'[attr.id]': 'id',
// 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
Expand Down

0 comments on commit e91f0a1

Please sign in to comment.