Modal focus on close

[palmem29]

It appears Bootstrap's modal nicely shifts focus from the closed modal back to the or that triggered it. So I understand focus will be returned easily for this implementation:

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

But if we're implementing a modal like this?

$("#exampleModalTrigger").on("click", function () {
    $("#exampleModal").modal("show");
});

Is there a promise made that Bootstrap will get focus back to #exampleModalTrigger? Or does it only work with data attributes? Or will it work if I go the vanilla JS route? Or is it meant to work with all of these tactics and there's something else about my implementation that I need to troubleshoot?

[julien-deramond]

When data-bs-toggle="modal" is used, the code automatically gives back the focus to the element that triggered the modal. It's done in our code at

bootstrap/js/src/modal.js

Lines 352 to 356 in a353ed4

	EventHandler.one(target, EVENT_HIDDEN, () => {
	if (isVisible(this)) {
	this.focus()
	}
	})

When you don't use data-bs, you'll have to do that manually. I've created a StackBlitz showing how to give back the focus in JS.

The code could be improved, but basically, it can be done like this:

(() => {
  'use strict';

  const btnSecondary = document.getElementById('btnSecondary');
  const exampleModal = document.getElementById('exampleModal');
  const myModal = new bootstrap.Modal(exampleModal, {});

  btnSecondary.addEventListener('click', (event) => {
    if (myModal) {
      exampleModal.addEventListener('hidden.bs.modal', (event) => {
        btnSecondary.focus();
      });
      myModal.show();
    }
  });
})();

The idea here is to listen to the hidden.bs.modal event.

In jQuery, could be something like this (haven't tested):

$('#exampleModal').on('hidden.bs.modal', function () {
    $('#btnSecondary').focus();
});

[palmem29]

Excellent! Thank you for your insight!