Topic: Set autofocus in Input not working in Modal
Focus on Input in modal window
Not working
I tried the solution provided by Damian Gemza 5 years ago in the topic "How to set focus on input in modal" , but it didn't work for me.
Neither mdbActive, autofocus or [config]="{backdrop: false, ignoreBackdropClick: true}" work on modal input.
<div mdbModal #pdvCadUp="mdbModal" class="modal fade top" id="frameModalTop" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true"
[config]="{backdrop: false, ignoreBackdropClick: true}">
You can listen to modal (opened) output and manually focus the input when this event is emitted. Here is an example:
HTML:
<div
mdbModal
#basicModal="mdbModal"
class="modal fade"
tabindex="-1"
role="dialog"
aria-labelledby="myBasicModalLabel"
aria-hidden="true"
(opened)="onOpen()"
>
TS:
onOpen() {
const input: HTMLInputElement | null = document.querySelector('.modal-input');
if (input) {
input.focus();
}
}
allancmello pro commented 2 years ago
Hi Arkadiusz,
Your solution worked, thank you.
You can close as resolved.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: MDB4 4.3.7
- Device: Desktop
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No