[Bug]: Bootstrap 5 / Modal / DropdownParent

[K20]

Bug description

Hello,

Here's a codepen : https://codepen.io/kevinbransard/pen/MYKEmNR

When using tom select with dropdownParent: "body" to prevent menu overflow, with dropdown_input plugin, the menu doesn't open. It seems to loop here :

Expected behavior

The menu is behind the BS5 modal (zindex in this case) and the focus is positioned on the dropdown input.

Steps to reproduce

See codepen : https://codepen.io/kevinbransard/pen/MYKEmNR

1. Add a tom select in a modal (With dropdown_input, and dropdownParent set to body)
2. Open the modal
3. Open the select menu
4. Error : menu is behind and not focused

Additional context

N/A

[K20]

It will work by adding "data-bs-focus="false" on the modal, but the BS5 trap focus won't work anymore, causing accessibility issues. We are going to check if we could disable trap focus temporarely before the tom select is opened and then restore it when closed.

Here is the working demo : https://codepen.io/kevinbransard/pen/bNEorNb

[K20]

Here's a trick to disable Bootstrap 5 autofocus in modal, only when tom select menu is opened. Then we restore BS5 behavior :

options.onDropdownClose = function () { document.body.style.overflow = ""; const $modalEl = $(tom.wrapper).closest(".modal"); if ($modalEl.length !== 0) { const modal = bootstrap.Modal.getInstance($modalEl); modal?._focustrap?.activate?.(); } };

options.onDropdownOpen = function () { document.body.style.overflow = "hidden"; const $modalEl = $(tom.wrapper).closest(".modal"); if ($modalEl.length !== 0) { const modal = bootstrap.Modal.getInstance($modalEl); modal?._focustrap?.deactivate?.(); } };

[Jeromito]

The way that I resolve the issue presented by @K20 was by indicate the specif parent for the select elment.
If the select was inside a modal I gave the parameter 'dropdownParent' of the tom-select the modal or the parent of the select.
The code below indicates what I have done.

let selectElement = document.getElementById('first-select');
let modalElClosest = null;
const modalEl = selectElement.closest('.modal');
if (modalEl) {
    modalElClosest = selectElement.parentElement || null;
}
const selectParentElement = modalElClosest || "body";

const tomSelectItem = new TomSelect(selectElement, {
    plugins: {
        clear_button: { title: 'Vider' }, // mantém o texto que queres
        dropdown_input: {}
    },
    dropdownParent: selectParentElement,
    create: false,
    persist: false
}