Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Issue in Bootstrap5 Modal #675

Open
Huangzc88 opened this issue Dec 29, 2023 · 3 comments
Open

[Bug]: Issue in Bootstrap5 Modal #675

Huangzc88 opened this issue Dec 29, 2023 · 3 comments
Labels
bug Something isn't working stale No activity

Comments

@Huangzc88
Copy link

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.

image

image

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

@Huangzc88 Huangzc88 added the bug Something isn't working label Dec 29, 2023
@THenkeDE
Copy link

THenkeDE commented Feb 1, 2024

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
Copy link
Author

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.

Copy link

github-actions bot commented Jun 1, 2024

This issue has not been active in 120 days and has been marked "stale". Remove stale label or comment or this will be closed in 15 days

@github-actions github-actions bot added the stale No activity label Jun 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working stale No activity
Projects
None yet
Development

No branches or pull requests

2 participants