Как установить фокус на поле ввода в модальности Clarity - PullRequest
Новая
       39

Как установить фокус на поле ввода в модальности Clarity

1 голос
/ 15 апреля 2020

Я использую Clarity 3 и Angular 9. У меня есть модальное окно с одним полем ввода. Когда модальное открыто, поле ввода должно быть в фокусном состоянии.

Вот код для моего модального окна: 

<clr-modal [(clrModalOpen)]="modal">
    <h3 class="modal-title">I have a nice title</h3>
    <div class="modal-body">
        <p>This input should get the focus when modal is opened.</p>
        <input class="clr-input" type="text" #input>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline" (click)="close()">Close</button>
    </div>
</clr-modal>

Проблема в том, что Clarity не обеспечивает обратный вызов, когда модальное открыто. Если я попытаюсь установить фокус в методе open(), то я не смогу этого сделать, потому что к этому времени модальное окно еще не открылось из-за анимации. 

@ViewChild('input', { static: false }) input: ElementRef;

open() {
    this.modal = true;
    this.input.nativeElement.focus(); // does not work
}

Если я установлю некоторую задержку с setTimeout, когда это работает, но мне не нравится такое решение. 

setTimeout(() => this.input.nativeElement.focus(), 10);

Я также пытался использовать директиву clrFocusOnViewInit, но она также не работает. 

<input class="clr-input" type="text" #input [clrFocusOnViewInit]="true">

Может кто-нибудь предложить мне хорошее решение? Почему директива clrFocusOnViewInit не работает?

https://stackblitz.com/edit/clarity-focus-on-view-init

Обновление

Я создал запрос функции в Проект ясности: https://github.com/vmware/clarity/issues/4476

1 Ответ

0 голосов
/ 15 апреля 2020

Использование clrFocusOnViewInit в этом случае не работает, потому что оно уже используется модалом для фокусировки на модальном заголовке. Это делается в соответствии с нашим дизайном доступности и исследованиями, чтобы гарантировать, что все пользователи могут правильно использовать модальный режим. Если вы выберете go против этого, это может иметь последствия для некоторых пользователей и соответствия доступности.

Ясность обеспечивает вывод при изменении открытого состояния, но срабатывает сразу, а не после анимации модального входа. Любой двустороннее связывание может быть деконструировано следующим образом, чтобы получить вход и выход отдельно. <clr-modal [clrModalOpen]="modal" (clrModalOpenChange)="onOpen()">

Если вам нужно изменить фокус, вы сможете прослушать событие открытия изменения, и вы можете установить время ожидания 1100 мс и затем переместить фокус.

...