Escape key is totally supressed in modal when data-bs-keyboard is false

[raysuelzer]

Prerequisites

• [X] I have searched for duplicate or closed issues
• [X] I have validated any HTML to avoid common problems
• [X] I have read the contributing guidelines

Describe the issue

I have a typeahead which appears within a modal. Pressing the escape key should close the typeahead results. However, it appears bootstrap is completely supressing the escape key event so any bindings to the escape key used within a modal are never triggered.

You can see in the console.log that all keys except for escape key are correctly picked up by the event listener.

Reduced test cases

Minimal reproduction: https://codepen.io/raysuelzer/pen/mdZvzKm

What operating system(s) are you seeing the problem on?

Windows, macOS, Linux

What browser(s) are you seeing the problem on?

Chrome, Safari, Firefox, Microsoft Edge, Opera

What version of Bootstrap are you using?

v5.3.3

[raysuelzer]

I believe this line of code is the problem, it appears to be preventing the escape key from doing anything. I feel like a better solution would be to not prevent default escape key behavior, or at least add an option to opt out of it preventing the use of the escape key within a modal.

https://github.com/twbs/bootstrap/blob/main/js/src/modal.js#L266

Edit:

Also important to note is if you change to listen for keydown event the escape key is not supressed on elements within the modal, but keyup on escape is completely intercepted.

[julien-deramond]

Thanks for reporting an issue @raysuelzer

I quickly created an example replicating your modal setup, adding a basic Bootstrap dropdown example along with a custom typeahead, which you can check out here: CodePen Example.

• When I open the dropdown using the keyboard, navigate through the elements, and press Esc, the dropdown closes as expected, and there's no modal animation triggered. It seems the event is properly intercepted by the dropdown.
• Similarly, when typing in the input/typeahead (e.g., typing a), a list of countries appears. When navigating through the list and pressing Esc, the list closes without any modal animation. I've used stopPropagation() here to ensure the event doesn’t reach the modal, preventing any unintended animation. Additionally, pressing Esc while the input/typeahead has no suggestions does not attempt to close the modal either, though this could be something worth enhancing.

Based on your description:

I have a typeahead which appears within a modal. Pressing the escape key should close the typeahead results. However, it appears bootstrap is completely supressing the escape key event so any bindings to the escape key used within a modal are never triggered.

I'm not entirely sure I see the difference between our setups. Could you clarify the specific scenario where the escape key isn't behaving as expected in your case?

It's possible I may have misunderstood the issue, so any additional details would help :)

[github-actions[bot]]

As the issue was labeled with awaiting-reply, but there has been no response in 14 days, this issue will be closed. If you have any questions, you can comment/reply.