Message box input press `Enter` to confirm

Vue: v2.6.12
BootstrapVue: v2.21.2

Instead of manually clicking OK, how to press Enter to confirm?

let text
this.$bvModal.msgBoxConfirm(<input vModel={text} />)

[Hiws]

@Hiws Also, how to prevent closing on clicking OK when using message boxes?

Listen for the hide event on root. this.$root.$on("bv::modal::hide", someMethod); When the method is called it’s passed a bvEvent parameter, which you can call preventDefault() on if you dont want to hide the modal. It also includes the ID of the modal which was closed, and which trigger was used.

Here’s a rough example. https://codepen.io/Hiws/pen/QWdjojm

[Hiws]

You can supply an id in the options object, and then use this.$bvModal.hide('my-modal-id') inside a keyup event on your input, which looks for the press of the Enter key (keycode 13). You can then call a separate method which handles your logic and hide your modal.

Example

https://codepen.io/Hiws/pen/ExZVExB

---

I’ve also opened a PR (https://github.com/bootstrap-vue/bootstrap-vue/pull/6523), which adds an optional parameter to the $bvModal.hide method, which allows you to supply a trigger. By supplying the trigger of ok, it will close the modal as if the OK button was pressed.

For example: $bvModal.hide('my-modal-id', 'ok'). This would work with cancel, backdrop and other triggers as well, even custom ones.