How do you put a modal inside a child component that is underneath a b-dropdown and have it not render inside the b-dropdown?

Question

I am making a child button component that will open an included modal in that same component. Right now, since the modal is nested within the root element (of the child component), it is rendering inside the parent component's b-dropdown (Bootstrap Vue). I aim to have the modal remain in the child component, but to render in the middle of the window like all my other modals.

Here's the call from my parent component (which uses Pug):

b-dropdown(right text='Reports')
  ExportItemsToPDF(:item_ids=`selectedItems`)

And here's the portion from the ExportItemsToPDF component:

.export_items_to_pdf
  b-dropdown-item(@click.prevent='openModal()') {{buttonTitle}}
  modal(name='export_items_to_pdf' height='auto' width='70%')
    form.modal-container(@submit.prevent='submit')
      h1 TEST

If there's any other supporting info needed, please let me know and I'll provide.

Thanks.

If using BootstrapVue `2.x.x`+ (not the `2.0.0-rc.xx` versions), the `` will portal the modal markup to be appended to the body tag (unless the `static` prop is set on ``) — Troy Morehouse, Jan 29 '20 at 02:39

score 0 · Answer 1 · answered Jan 27 '20 at 21:11

I don't think you can do it without any custom Javascript to manipulate the modal. If you are trying to benefit from a shared component that you can drop into other components (to keep your code DRY etc), you will have to split the modal into its own component, then in the parent component do something like...

ExportItemsToPDFModal
b-dropdown(right text='Reports')
  ExportItemsToPDFDropdownItem(:item_ids=`selectedItems`)

...so that the modal is a sibling (or possibly higher, like an aunt/uncle or great-aunt/great-uncle) of the b-dropdown instead of a child element.

How do you put a modal inside a child component that is underneath a b-dropdown and have it not render inside the b-dropdown?

1 Answers1