I think $('#form1').on('focus', function() { $('#basicExampleModal').modal('show'); }) should work. I made a snippet for you, you can check it here: https://mdbootstrap.com/snippets/jquery/krzysztof-wilk/2341059#js-tab-view

Best regards

You can try this.

Set focus() after shown-event

<script>
    $("#modal_window").on('shown.bs.modal', function(){
        $('#input_field_id').focus();
    });
    $('#modal_window').modal('show');
</script>

Hi, I have the same problem. I cannot set the focus on the input field. Neither with "autofocus" nor with Javascript ".focus()".

I am trying it with this page "login-page.html" from the templates folder of the mdbootstrap-pro folder. (I am using NPM via git to download the entire library).

I also tried this:

setTimeout(function() { $("#orangeForm-name").focus(); console.log("Focus set"); }, 500);

But this does not help either. Any ideas? I am using version MDB Pro 4.8.11

We have the same problem in Vue. We can focus and type only 1 character, after that, focus is losing, there is no error in console. It happens after we are updated to mdb version 5.8.2, with 5.6 we had no problems.

<div class="md-form">
    <input type="text" id="form1" class="form-control">
    <label for="form1" class="">Example label</label>
</div>

$(function() {
    $('#form1').focus();
});