Угловой материал 7: Невозможно правильно выбрать переключатели внутри компонента, используя клавиатуру

Question

Я разрабатываю приложение с Ionic 4/Angular 7/Angular Material 7.

На экране есть степпер.

Внутри каждого степпера есть сложные формы. Учитывая его сложность, я поместил эту форму внутри компонентов.

Во втором шаге есть радиогруппа. Когда я открываю второй шаг, я могу установить фокус на радио с помощью клавиатуры, но не могу выбрать радио-кнопку. Переключатель имеет серый круг, но не цвет выделения.

На первом этапе также есть радиогруппа, и в исходном состоянии я могу выбрать ее с помощью клавиатуры. Но если я открою второй шаг и снова открою первый шаг, переключатели также не будут доступны для выбора.

Я смоделировал ситуацию без компонентов внутри степперов и не смог воспроизвести проблему таким образом. Затем я делаю вывод, что проблема вызвана компонентом внутри шага после открытия этого шага.

Как я могу правильно выбрать переключатели внутри шага?

Answer 1

Паллиативно решается с помощью директивы:

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