After a blur event on an input field "bootbox1", I want to use a Bootstrap Modal for an message, after the modal closes the focus would go to the input field "bootbox2". But the input field does not get focus.

What am I doing wrong?

Demo

HTML

<input type="text" id="bootbox" />
<input type="text" id="bootbox2" />
<div id="myModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
        <!-- dialog body -->
        <div class="modal-body">
            <button type="button" class="close" data-dismiss="modal">&times;</button>Hello world!</div>
        <!-- dialog buttons -->
        <div class="modal-footer">
            <button type="button" class="btn btn-primary">OK</button>
        </div>
    </div>
  </div>
</div>

JS

$('#bootbox').on('blur', function checkSelection(e) {
  $("#myModal").on("show", function () { // wire up the OK button to dismiss the modal when shown
    $("#myModal a.btn").on("click", function (e) {
        console.log("button pressed"); // just as an example...
        $("#myModal").modal('hide');
        $('#bootbox2').focus();
        // dismiss the dialog
    });
  });

  $("#myModal").on("hide", function () { // remove the event listeners when the dialog is dismissed
    $("#myModal a.btn").off("click");
    $('#bootbox2').focus();
  });

  $("#myModal").on("hidden", function () { // remove the actual elements from the DOM when fully hidden
    $("#myModal").remove();
  });

  $("#myModal").modal({ // wire up the actual modal functionality and show the dialog
    "backdrop": "static",
        "keyboard": true,
        "show": true // ensure the modal is shown immediately
  });

});

//this works
$('#bootbox2').on('blur', function checkSelection(e) {
  $('#bootbox').focus();
});

After a blur event on an input field "bootbox1", I want to use a Bootstrap Modal for an message, after the modal closes the focus would go to the input field "bootbox2". But the input field does not get focus.

What am I doing wrong?

Demo

HTML

<input type="text" id="bootbox" />
<input type="text" id="bootbox2" />
<div id="myModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
        <!-- dialog body -->
        <div class="modal-body">
            <button type="button" class="close" data-dismiss="modal">&times;</button>Hello world!</div>
        <!-- dialog buttons -->
        <div class="modal-footer">
            <button type="button" class="btn btn-primary">OK</button>
        </div>
    </div>
  </div>
</div>

JS

$('#bootbox').on('blur', function checkSelection(e) {
  $("#myModal").on("show", function () { // wire up the OK button to dismiss the modal when shown
    $("#myModal a.btn").on("click", function (e) {
        console.log("button pressed"); // just as an example...
        $("#myModal").modal('hide');
        $('#bootbox2').focus();
        // dismiss the dialog
    });
  });

  $("#myModal").on("hide", function () { // remove the event listeners when the dialog is dismissed
    $("#myModal a.btn").off("click");
    $('#bootbox2').focus();
  });

  $("#myModal").on("hidden", function () { // remove the actual elements from the DOM when fully hidden
    $("#myModal").remove();
  });

  $("#myModal").modal({ // wire up the actual modal functionality and show the dialog
    "backdrop": "static",
        "keyboard": true,
        "show": true // ensure the modal is shown immediately
  });

});

//this works
$('#bootbox2').on('blur', function checkSelection(e) {
  $('#bootbox').focus();
});

• javascript
• jquery
• twitter-bootstrap
• focus

1 Answer 1

You need to wait for the hidden.bs.modal event to fire, not the hide.bs.modal.

According to the Bootstrap Docs for the event hide.bs.modal

This event is fired immediately when the hide instance method has been called.

Whereas hidden.bs.modal

This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to plete).

Since your focus is being called before the overlay has been removed the input cannot take the keyboard focus yet.