Angular7 и NgbModal: как убрать автофокус по умолчанию - PullRequest
0 голосов
/ 04 декабря 2018

мы только что обновили наше приложение до angular 7 и заметили, что все модали ngBootstrap теперь имеют автофокус по умолчанию на кнопке закрытия, как на следующем рисунке.

modal image

вот мой код:

html модальный код:

<form [formGroup]="storeForm" novalidate>
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title">Modal Test</h4>
            <button type="button" class="close" aria-label="Close" 
               (click)="activeModal.dismiss('Cross click')">
               <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <h4>Todo</h4>
        </div>
        <div class="modal-footer">
            <button role="button" type="submit" class="btn btn-primary" 
               (click)="activeModal.close('Finish click')" prevent-double- 
               submit>{{ 'store.add.finish' | translate }}</button>
       </div>
    </div>
</form>

и как называется модал благодаря моему component.ts

    const modal = this._modalService.open(ModalComponent, { backdrop: 
       'static', size: 'lg'});
    modal.result.then(
        (data) => {
           // some code
        },
        () => {
        }
    );

Мой вопросКак я могу удалить этот автофокус по умолчанию, который не соответствует нашему ожидаемому поведению?

Спасибо за чтение и, пожалуйста, простите за ошибки в написании.

Ответы [ 2 ]

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

Это ужасный хак, но вы можете добавить невидимый элемент в качестве первого элемента:

<input type="text" style="display:none" />
0 голосов
/ 05 декабря 2018

Фокус должен быть в модальном состоянии по причинам доступности и навигации по клавиатуре.По умолчанию фокус находится на первом фокусируемом элементе в модале, который в вашем случае является кнопкой закрытия.Вы можете добавить атрибут ngbAutofocus к элементу, в котором вы хотите сделать фокус.

Демонстрация управления фокусом .

<button type="button" ngbAutofocus class="btn btn-danger"
      (click)="modal.close('Ok click')">Ok</button>

Подробнее о GitHub

...