Focus redirection does not work for mat-radio-button #13953

jelbourn · 2018-11-02T23:56:52Z

mat-radio-button has some code to redirect focus to the underlying native <input type="radio">. This seems to not actually work, though, because calling .focus() on the <mat-radio-button> does not trigger a focus event.

You can see the behavior here, with radio buttons inside of a dialog with cdkFocusInitial

The same problem almost certainly exists for mat-checkbox and mat-button-toggle.

I'm not sure the best way to approach this, but one idea would be to use focusin or useCapture on a top-level element and specifically check for the controls in question.

The text was updated successfully, but these errors were encountered:

In angular#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 angular#13953.

Currently the `mat-slide-toggle` doesn't redirect focus to the underlying `input` element. This means that things like the focus trap's `cdkFocusInitial` won't work when they're set on the toggle host. These changes add a `tabindex` and set up a `focus` listener to forward focus to the input. Relates to angular#13953.

Currently the `mat-checkbox` host element isn't focusable, which means that if consumers decided to use something like `cdkFocusInitial` on it, nothing would happen. These changes tweak the `tabindex` so the element is focusable and add a `focus` listener that'll redirect focus to the `input`. Relates to angular#13953.

Currently if the consumer sets the `cdkFocusInitial` group on a non-focusable element, nothing will happen. These changes add a warning if the app is running in dev mode. Relates to angular#13953.

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.

Currently the `mat-slide-toggle` doesn't redirect focus to the underlying `input` element. This means that things like the focus trap's `cdkFocusInitial` won't work when they're set on the toggle host. These changes add a `tabindex` and set up a `focus` listener to forward focus to the input. Relates to #13953.

Currently the `mat-checkbox` host element isn't focusable, which means that if consumers decided to use something like `cdkFocusInitial` on it, nothing would happen. These changes tweak the `tabindex` so the element is focusable and add a `focus` listener that'll redirect focus to the `input`. Relates to #13953.

Currently if the consumer sets the `cdkFocusInitial` group on a non-focusable element, nothing will happen. These changes add a warning if the app is running in dev mode. Relates to #13953.