Angular7 and NgbModal: how to remove default auto focus

Question

Angular7 and NgbModal: how to remove default auto focus

21.1k views Asked by Flow At 26 December 2024 at 15:08

we just upgraded our application to angular 7 and we noticed that all ngBootstrap modals have now a default autofocus on the close button like the following picture.

here is my code:

html modal code:

<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>

and how is the modal called thanks to my component.ts

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

My question is how can i remove this default autofocus that doesn't fit with our expected behaviour?

Thanks for the reading and please forgive the misspellings.

Original Q&A

There are 7 answers

Lady_Angular On 15 December 2021 at 13:33

In my case i wanted to remove totally the autofocus on buttons or inputs. I set instead "ngbAutofocus" (example below) in the main container and it works for me. If someone has a better solution, please share. Thank you :-)

 <div class="modal-header" ngbAutofocus>
    <h4 class="modal-title" id="modal-title">Profile deletion</h4>
    <button type="button" class="close" aria-label="Close button" aria-describedby="modal-title" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p><strong>Are you sure you want to delete <span class="text-primary">"John Doe"</span> profile?</strong></p>
    <p>All information associated to this user profile will be permanently deleted.
    <span class="text-danger">This operation can not be undone.</span>
    </p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-secondary" (click)="modal.dismiss('cancel click')">Cancel</button>
    <button type="button" class="btn btn-danger" (click)="modal.close('Ok click')">Ok</button>
  </div>

Jacquers On 20 February 2019 at 09:26

It's an ugly hack, but you can add a non visible element as the first element:

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

Sandeep Patel On 14 February 2020 at 11:31

Add style="outline: none;" to your close button

Example :

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

Adam On 28 December 2021 at 12:38

I note that Bootstrap itself does not highlight the first control

ngx-bootstrap also does not highlight the first control

Daniel Congrove On 16 August 2022 at 19:15

Add tabindex="-1" ngbAutofocus to any text element before your close button. This will replicate the default Bootstrap functionality.

Example:

<div class="offcanvas-header">
  <h5 class="offcanvas-title" tabindex="-1" ngbAutofocus>Contact Us</h5>
  <button type="button" class="btn-close" (click)="offcanvas.dismiss('Cross click')" aria-label="Close"></button>
</div>

It removes the initial focus from the Close button, while bringing the focus into the modal (or offcanvas). That way the close button is the next focus-able item (and none of the links in the background <body> element are focus-able).

Note: you may also need to addstyle="outline:0" to your text element to ensure there isn't an outline on subsequent open/close actions.

Eudz On 04 October 2019 at 15:14

If you don't mind the close button actually focused but want to get rid of the ugly outline, you can use outline: none.

template.html:

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

styles.css:

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

**Kld** · Accepted Answer · 2018-12-05 02:05:23

The focus is needed to be within modal for accessibility and keyboard navigation reasons. By default the focus is on the first focusable element within modal, which in your case is the close button. You can add ngbAutofocus attribute to the element where you want the focus to be.

Focus management demo.

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

You can read more on github

TechQA.

Angular7 and NgbModal: how to remove default auto focus

There are 7 answers

Related Questions in ANGULAR

Related Questions in TYPESCRIPT

Related Questions in NG-BOOTSTRAP

Related Questions in NG-MODAL

Popular Questions

Popular Tags

Trending Questions