Launching a modal inside a modal closes the parent

Simple enough. I’m trying to open a modal inside a modal. You could probably argue against the UI ramifications against this but in our use-case, it’s worked well in the past under standard Bootstrap.

When trying the following little test harness you’ll click the button and whole thing closes.

let v = new Vue({
	template: `
	<b-modal id="visible_modal" title="visible modal" visible>
		<b-btn v-b-modal.modal1>Launch sub modal</b-btn>

		<b-modal id="modal1" title="Sub-modal!">
			<p class="my-4">Hello from sub-modal!</p>
		</b-modal>
	</b-modal>
	`,
})
v.$mount()
document.body.appendChild(v.$el)

This probably something to do with the events because if you set the child to be visible from the start, it displays fine.

let v = new Vue({
	template: `
	<b-modal id="visible_modal" title="visible modal" visible>
		<b-btn v-b-modal.modal1>Launch sub modal</b-btn>

		<b-modal id="modal1" title="Sub-modal!" visible>
			<p class="my-4">Hello from sub-modal!</p>
		</b-modal>
	</b-modal>
	`,
})
v.$mount()
document.body.appendChild(v.$el)

I’ve tried hooking on a almost every option to try and see if that fixes it but I just don’t know enough about the event chains here to what what they’re doing (or why).

[tmorehouse]

I think we may have an option in mind to support opening modals over modals (unlike native Bootstrap V4), by keeping track of how many modals are open at the same time. Although the backdrop would appear darker each time a new modal is opened over another modal. (backdrops over backdrops)

We’re working on a bunch of improvements on various components for the next release.

[sonicmolson]

I just did this. You have to capture the hide event on the parent vue object and preventDefault - as well as manually removing the modal-open class on the body on the child show event.