How to set focus on input in modal?

Topic: How to set focus on input in modal?

dxl pro asked 6 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?

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Hello dxl,

I've prepared a simple solution for your's case:

your's component.ts file:
<div>
<pre>import { Component, ElementRef, HostListener, ViewChild, Output, EventEmitter } from '@angular/core';</pre>
<div>
<div>
<pre>@ViewChild('focusInput') focusInput: ElementRef;

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

this.setFocusToInput();

}

setFocusToInput() {

this.focusInput.nativeElement.focus();

}</pre>
</div>
</div>
</div>
<div>Your's component.html file:</div>
<div>Please add #focusInput identifier to your's <input> element in your's modal. For example:</div>
<div>
<div>
<pre><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}">

</button>

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

</div>

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

</div>

<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></pre>
</div>
</div>
<pre></pre>
<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.</div>
<div>Best Regards,</div>
<div>Damian</div>
<div></div>
<div></div>

Please insert min. 20 characters.

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 6 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 free commented 4 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 4 years ago

Which version of MDB Angular do you use?

Add comment

Guillaume Gournay free answered 4 years ago

0 0 Best answer

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

Arkadiusz Idzikowski staff commented 4 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.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

dxl

Pro User 67Support score
20Questions 1Answers 0Snippets