Angular7 и NgbModal: как удалить автофокус по умолчанию

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

модальное изображение

вот мой код:

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
        },
        () => {
        }
    );

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

Благодарим за чтение и, пожалуйста, извините за орфографические ошибки.


typescript angular ng-bootstrap ng-modal
person Flow    schedule 04.12.2018    source источник

Ответы (4)


arrow_upward
58
arrow_downward

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

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

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

Вы можете узнать больше на github.

person Kld    schedule 05.12.2018
comment
это то, что я сделал, просто проверял, смогу ли я вернуть свое прежнее поведение. Но, похоже, это невозможно. Спасибо за ваше время. - person Flow; 06.12.2018

arrow_upward
9
arrow_downward

Если вы не возражаете против того, чтобы кнопка закрытия была на самом деле сфокусирована, но хотите избавиться от уродливых контуров, вы можете использовать outline: none.

template.html:

<button type="button" aria-label="Close">Close</button>

styles.css:

button[aria-label="Close"]:focus {
  outline: none;
}
person Eudz    schedule 04.10.2019
comment
Пожалуйста, подумайте о добавлении некоторой прозы, которая придаст вашему коду некоторый контекст. Я думаю, что вы обнаружите, что это приносит больше пользы другим, сталкивающимся с проблемой этого вопроса. - person entpnerd; 05.10.2019
comment
кнопка [aria-label = Close]: focus {outline: none;} - person Alessandro; 09.12.2019
comment
По этой проблеме было обсуждение: github.com/ng-bootstrap/ng- bootstrap / issues / 2814 Однако, похоже, результата нет. Так что наем наброска кажется пока лучшим решением. - person Sarang; 28.11.2020

arrow_upward
7
arrow_downward

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

<input type="text" style="display:none" />
person Jacquers    schedule 20.02.2019

arrow_upward
1
arrow_downward

Добавьте style="outline: none; "к кнопке закрытия

Пример :

<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')"> 
<span aria-hidden="true">&times;</span>
</button>
person Sandeep Patel    schedule 14.02.2020