Angular material 7: Cannot correctly select radio buttons inside component using keyboad

Question

I'm developing an app with Ionic 4/Angular 7/Angular Material 7.

In a screen there's a stepper.

Inside each stepper there's complex forms. Given its complexity I put this form inside components.

Inside the second step there's a radio group. When I open the second step I can set focus on a radio with keyboard, but can't select a radio button. The radio button get a grey circle around but not the color of selection.

In the first step there's also a radio group and in the initial state I can select it using keyboard. But if I open the second step and open the first step again the radio buttons are not selectable too.

I've simulated the situation without components inside the steppers and I was not able to reproduce the problem this way. Then I deduce the problem is caused by the component inside a step after this step is open.

How can I be able to correctly select the radio buttons inside a step?

Share an example - on Stackblitz or at least code. – G. Tranter Jan 28 '19 at 22:07 — G. Tranter, Jan 28 '19 at 22:07
I was not able to reproduce this o Stackblitz. – Natanael Feb 01 '19 at 11:40 — Natanael, Feb 01 '19 at 11:40

score 0 · Answer 1 · answered Feb 03 '19 at 22:14

Palliatively solved through a directive:

import { Directive, HostListener } from '@angular/core';
import { MatRadioButton } from '@angular/material';

@Directive({
    selector: 'mat-radio-button'
})
export class MatRadioCorrectionDirective {

    constructor(private host:MatRadioButton) { }

    @HostListener('keyup', ['$event'])
    onKeyup(event: KeyboardEvent) {
        // console.log(event);

        if(
               event.keyCode == 38 // arrow up
            || event.keyCode == 40 // arrow down
            || event.keyCode == 37 // arrow left
            || event.keyCode == 39 // arrow right        
        ) {         
            event.preventDefault();              
            this.host.checked = true;
            // TODO: send event
            this.host.change.emit(null);
            // setTimeout(() => {
            // }, 500);
        }
    }
}

Angular material 7: Cannot correctly select radio buttons inside component using keyboad

1 Answers1