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

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

0 голосов
/ 28 января 2019

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

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

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

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

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

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

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

1 Ответ

0 голосов
/ 04 февраля 2019

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

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