Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Pressing the escape key closing a <BModal> does not emit an update to v-model value.

See original GitHub issue

Hey community I hope you are all well.

I just realized, that when showing a <BModal> and closing the modal with the escape key, the modal’s v-model binding is not updated, leading to issues when wanting to reshow the modal.

See https://codesandbox.io/s/modal-close-bug-9sqsl6?file=/src/App.vue for a reproduction of this issue.

This issue has the same systemic root cause as #657, as bootstrap-vue-3’s events are quite detached from bootstrap’s events. This might or should raise concern, whether it is really manageable to predict and cover these often unapparent corner cases, or whether there should be another strategy, such as #658.

Best regards Markus

Issue Analytics

State:
Created a year ago
Comments:7 (3 by maintainers)

Top GitHub Comments

2reactions

VividLemoncommented, Sep 16, 2022

Just another perspective: There might be a valid UX-Unit-Test in the future to just these corner-cases (Escape, Aria, Back key (?)).

Due to the teleport in BModal, I was having issues when targeting the component when component testing. As such, BModal is not currently covered by tests. Eventually it will contain tests for all of those.

1reaction

Atokuluscommented, Sep 16, 2022

Dear @devhus and @VividLemon I can totally support this side as well, as it gets much more clear for the developer to read bootstrap-vue-3’s code, so in the end it does not really matter to me.

Please just consider there are currently and in the future many more UX concepts e.g. for impaired people, and bootstrap seems to handle them quite well. It can get frustrating quite fast to keep up with these changes 😉

Best regards and many thanks for your insights 😀 Markus

Top Results From Across the Web

Disabling the escape key handler #761 - euvl/vue-js-modal

Problem: Looking for a way to be able to disable the escape key handler while maintaining the ability to click to close. Right...

Close dialog when ESC key is pressed - vue.js - Stack Overflow

This only works, if you have selected anything inside the modal. If there is no selection, the event will be triggered on the...

Modal | Components - BootstrapVue

preventDefault() method of the event object passed to your ok (OK button), cancel (Cancel button), close (modal header close button) and hide event...

Cancel a React Modal with Escape Key or External Click

How do you cancel a React modal with an escape key or external click? Thanks to a few handy hooks, it's easier than...

Modal | Components | BootstrapVue

<b-modal> supports close on ESC (enabled by default), close on backdrop click (enabled by default), and the X close button in the header...