issue with :append-to-body="true" in a modal.

[iford]

I am using version 2.6.8 and I encountered an issue with :append-to-body="true" in a modal. I cannot select the dropdown.

Version

• Vue version: 3

Description

<div id="modal-surface-create" ref="modal" class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false">
	<div class="modal-dialog modal-lg modal-dialog-centered">
		<div class="modal-content">
			<div class="modal-header border-0">
				<h3 class="modal-title fw-semibold">แก้ไขข้อมูล</h3>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="col-12 col-md-4 col-lg-4 mb-5">
				<VueMultiselect
					v-model="t"
					:options="toOptions(generateOptionTable())"
					:append-to-body="true"
					@input="
						(e:any) => {
							console.log(e)
						}
					"
				>
				</VueMultiselect>
			</div>

		</div>
	</div>

[mikehodgson]

Can confirm, we are running into the same issue when using it in a UIKit modal.

[JasperTey]

If by "cannot select the dropdown" you mean that the dropdown overlay does not appear while inside a modal, it might be that your modal's z-index is higher than the dropdown overlay, causing it to appear "behind the modal" and out of sight.

First find out what your application's .modal z-index is. Then ensure you specify the same or higher z-index for the multiselect component's "dropdown" class.

I think you're using Bootstrap judging by your snippet, in which case their modals use z-index of 1055 by default.

So maybe something like this:

.modal-dialog .multiselect-dropdown {
    z-index: 1060 !important;
}

Or if using tailwind, handle it through the :classes prop:

<MultiSelect :classes="{ dropdown: 'multiselect-dropdown !z-[1060]' }" ... > 

Hope this helps someone - I was experiencing this issue and resolved it as such.