You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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
The text was updated successfully, but these errors were encountered:
raysuelzer
changed the title
Escape key is totally supressed in modal when data-bs-keyboard is falose
Escape key is totally supressed in modal when data-bs-keyboard is false
Sep 9, 2024
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.
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.
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 :)
Prerequisites
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
The text was updated successfully, but these errors were encountered: