Focus doesn't seem to be working

sitestreet · September 3, 2021, 1:23pm

Wappler: 4.0.2
OS: MacOS
Server: PHP

I have a modal containing a form and I want the first field (a normal input field) to have the focus when the modal is shown but I can’t get it to work. This is the code for the modal:

<div class="modal fade" id="modalAddEngineer" is="dmx-bs5-modal" tabindex="-1" nocloseonclick="true" dmx-on:hide-bs-modal="serverconnectformAddEngineer.reset()" dmx-on:show-bs-modal="serverconnectformAddEngineer.inp_engineerFirstName.focus()">

Is it a bug or am I going about it the wrong way?

Teodor · September 3, 2021, 1:26pm

You need to use the shown event, not the show one.

sitestreet · September 3, 2021, 1:34pm

I thought it was probably me doing something wrong!

Just to help me in the future - what’s the difference between show and shown?

Teodor · September 3, 2021, 1:36pm

Explanation from Bootstrap docs:

So you want to use shown here, as you want to wait for the modal to load and become visible then focus the field.

sitestreet · September 3, 2021, 1:37pm

Brilliant. Makes perfect sense.

Thanks for the mega quick solution.