[Bug]: Issue in Bootstrap5 Modal

[Huangzc88]

Bug description

When using tom-select in bootstrap5 modal, the drop-down box data will be blocked when selecting it. Setting z-index cannot solve the problem.

Can you help fix this problem?

Expected behavior

The expected behavior should be no problem.

Steps to reproduce

used in bootstrap5 modal

Additional context

Bootstrap ver.5.3.1
Microsoft Edge ver.120.0.2210.6
tom-select ver.2.3.0

[THenkeDE]

you may add something like this to break out of the scrollable bs5 modal:

        document.querySelectorAll('[data-bs-toggle="dropdown"]').forEach( (dropdownToggleEl) => {
            bootstrap.Dropdown.getOrCreateInstance(dropdownToggleEl, { popperConfig() { return { strategy: 'fixed' } } });
        });

at least it worked for me.

and you need to add popper to be used by TomSelect

                new TomSelect(e, {
                    onInitialize:function(){
                        this.popper = Popper.createPopper(this.control,this.dropdown);
                    },
                    onDropdownOpen:function(){
                        this.popper.update();
                    },

[Huangzc88]

you may add something like this to break out of the scrollable bs5 modal:

        document.querySelectorAll('[data-bs-toggle="dropdown"]').forEach( (dropdownToggleEl) => {
            bootstrap.Dropdown.getOrCreateInstance(dropdownToggleEl, { popperConfig() { return { strategy: 'fixed' } } });
        });

at least it worked for me.

and you need to add popper to be used by TomSelect

                new TomSelect(e, {
                    onInitialize:function(){
                        this.popper = Popper.createPopper(this.control,this.dropdown);
                    },
                    onDropdownOpen:function(){
                        this.popper.update();
                    },

Thank you very much for your answer, I'll see if it works.