Pesquisa de site

angular - Angular7 e NgbModal: como remover o foco automático padrão

Acabamos de atualizar nossa aplicação para Angular 7 e notamos que todos os modais do ngBootstrap agora têm um foco automático padrão no botão de fechar, como na imagem a seguir.

aqui está meu código:

código modal 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>

e como o modal é chamado graças ao meu component.ts

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

Minha pergunta é como posso remover esse foco automático padrão que não se encaixa com o comportamento que esperamos?

Obrigado pela leitura e por favor, desculpe os erros de ortografia.

Resposta #1

O foco precisa estar dentro do modal por razões de acessibilidade e navegação por teclado. Por padrão, o foco está no primeiro elemento focável dentro do modal, que no seu caso é o botão de fechar. Você pode adicionar o atributo ngbAutofocus ao elemento onde deseja que o foco esteja.

Demonstração de gerenciamento de foco.

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

Você pode ler mais no github

Resposta #2

Se você não se importa que o botão de fechar esteja realmente em foco, mas quer se livrar do contorno feio, você pode usar outline: none.

template.html:

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

styles.css:

button[aria-label="Close"]:focus {
  outline: none;
}

Resposta #3

É um truque feio, mas você pode adicionar um elemento não visível como o primeiro elemento:

<input type="text" style="display:none" />

Artigos relacionados