CODEWITHSUNDEEP
angulartypescriptng-bootstrapng-modal
Flow
Flow

Reputation: 580

Angular7 and NgbModal: how to remove default auto focus

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.

modal image

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.

Upvotes: 41

Views: 22808

Answers (7)

Daniel Congrove
Daniel Congrove

Reputation: 3679

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.

Upvotes: 1

Adam
Adam

Reputation: 2736

I note that Bootstrap itself does not highlight the first control

ngx-bootstrap also does not highlight the first control

Upvotes: 0

Lady_Angular
Lady_Angular

Reputation: 15

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>

Upvotes: 1

Eudz
Eudz

Reputation: 608

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

Upvotes: 14

Sandeep Patel
Sandeep Patel

Reputation: 2507

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>

Upvotes: 1

Jacquers
Jacquers

Reputation: 199

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

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

Upvotes: 12

Kld
Kld

Reputation: 7068

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

Upvotes: 78

Related Questions