issue with :append-to-body="true" in a modal. about multiselect HOT 2 OPEN

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

from multiselect.

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.

from multiselect.