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

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?

Answer 1

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);
}
}
}