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.

[mikehodgson]

@JasperTey That's not what's being described here. The issue is that the drop-down appears, but nothing can be selected. I have attached a demo of the problem. If you use the keyboard, you CAN select something.

https://github.com/user-attachments/assets/b035e6b1-3a88-4ffe-bcdd-d724f650f13d