Power Pages: how to disable ESC on modals

Earlier versions of Power Pages use Bootstrap 3, newever Bootstrap 5, and all use jQuery.

Check jQuery and Bootstrap versions

Type in console:

• $.fn.jquery => jQuery version 3.6.2
• $.fn.tooltip.Constructor.VERSION => Bootstrap versions ~3.4.1 or ~5.2.2 depending on when a portal was created

In my case I have Bootstrap 3.4.1 for the portal provisioned 2 years ago and 5.2.2 for the recent one.

Modal with ESC

I use a modal for user inputs. Since the modal has many inputs for user to fill in, I need to disable the modal closing functionality with ESC key.

There is a built-in option named keyboard that can be set to false to disable closing the modal when escape key is pressed.

Unfortunately, adding data-keyboard="false" on modal didn't change any behaviour and the modal successfully continued disappearing with ESC.

Adding the following code disables ESC only when modal is in focus:

document.querySelector("#fa-edit-modal").addEventListener("keydown", (e) => {
    if (e.key === "Escape") {
        e.stopPropagation()
    }
})

However when the opened modal is out of focus, for example when <dialog> is activated asking the user to confirm the action, modal is successfully closed with ESC.

I started to dig why keyboard set to false doesn't work on Bootstrap modal.

Event Listeners on modal

To check event listeners we use Dev Tools => select the modal in Elements => Event Listeners tab => keydown event:

Checking keydown scripts one by one I find the following code which is responsible for the modals closing:

What can we say from this code?

1. Event listener is set on the document level and fired when keycode 27 ESC is pressed.
2. If modal is visible if (c(".modal").is(":visible")), modal is closed c(".modal").modal("hide") => that is our culprit.
3. c here is jQuery object $
4. Since it's sitting on the document, event bubbles up from a target until reaching the document level. so it practically fires on every element in focus.
5. This script belongs to the Power Pages bundle and therefore overrides the Bootstrap functionality.

To check jQuery specific event listeners of element we can type in console $._data(document, "events"). This is the same event we are interested in:

How to fix

To remove the jQuery event we use .off() command explained here as follows: $(document).off("keydown").

As a result, the behaviour of the modals closing functionality can now be controlled with the bootstrap 'keyboard' option.