Angular7 And NgbModal: How To Remove Default Auto Focus


Answer :

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


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

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

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

Comments

Popular posts from this blog

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Android How Can I Convert A String To A Editable