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

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

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

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

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

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

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

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


components radio-button angular7 angular-material-7 mat-stepper
person Natanael    schedule 28.01.2019    source источник
comment
Поделитесь примером — на Stackblitz или хотя бы кодом.   -  person G. Tranter    schedule 29.01.2019
comment
Мне не удалось воспроизвести это в Stackblitz.   -  person Natanael    schedule 01.02.2019

Ответы (1)


arrow_upward
0
arrow_downward

Паллиативно решается директивой:

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);
        }
    }
}
person Natanael    schedule 03.02.2019