How to set focus on input in modal?


Topic: How to set focus on input in modal?

dxl pro asked 4 years ago

For some reason, the modal popup is stealing focus. If I use <input autofocus> or attempt to set focus dynamically on an input inside modal body, it would not work. How do I give focus to an input inside a modal?

Damian Gemza staff answered 4 years ago

Hello dxl, I've prepared a simple solution for your's case: your's component.ts file:
import { Component, ElementRef, HostListener, ViewChild, Output, EventEmitter } from '@angular/core';
@ViewChild('focusInput') focusInput: ElementRef;

@HostListener('focusout', ['$event']) public onListenerTriggered(event: any): void {

this.setFocusToInput();

}

setFocusToInput() {

this.focusInput.nativeElement.focus();

}
Your's component.html file:
Please add #focusInput identifier to your's <input> element in your's modal. For example:
<button type="button" class="btn btn-primary relative waves-light" (click)="basicModal.show()" mdbRippleRadius>Launch demo modal</button>

<div mdbModal #basicModal="mdb-modal" class="modal fade" (onshow)="showModal()" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel"

aria-hidden="true" [config]="{backdrop: false, ignoreBackdropClick: true}">

<div class="modal-dialog"role="document">

<div class="modal-content">

<div class="modal-header">

<button type="button"class="close pull-right"aria-label="Close" (click)="basicModal.hide()">

<span aria-hidden="true">×</span>

</button>

<h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>

</div>

<div class="modal-body">

<div class="md-form">

<input #focusInput mdbActive type="text" id="form1" class="form-control">

<label for="form1" class="">Example label</label>

</div>

</div>

<div class="modal-footer">

<button type="button" class="btn btn-secondary waves-light"aria-label="Close" (click)="basicModal.hide()" mdbRippleRadius>Close</button>

<button type="button" class="btn btn-primary relative waves-light" mdbRippleRadius>Save changes</button>

</div>

</div>

</div>

After this modifications, please refresh your's page, and click on modal button. If this won't work for you, please let me know.
Best Regards,
Damian

dxl pro commented 4 years ago

Thanks Damian. This part (from your snippet) did the trick was: [config]="{backdrop: false, ignoreBackdropClick: true} autofocus simply worked. I didn't even need the HostListener

ak3727 commented 3 years ago

Yes it Works, But input tag get Focus on every event , I cant even focus any other input tag, after Opening the moda


Arkadiusz Idzikowski staff commented 3 years ago

Which version of MDB Angular do you use?


It's a bit scary this bug is still here 2 years later.


Arkadiusz Idzikowski staff commented 2 years ago

We are currently working on the new focus trap implementation and the fix should be available in the near future for every MDB component that uses focus trap.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No