diff --git a/.changeset/fix-tom-select-dropdown-z-index.md b/.changeset/fix-tom-select-dropdown-z-index.md new file mode 100644 index 000000000..3f39205b0 --- /dev/null +++ b/.changeset/fix-tom-select-dropdown-z-index.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Fixed Tom Select's `.ts-dropdown` losing its z-index, background, and colors to the bootstrap5 preset CSS. diff --git a/core/scss/vendor/_tom-select.scss b/core/scss/vendor/_tom-select.scss index b4a60b393..e91372951 100644 --- a/core/scss/vendor/_tom-select.scss +++ b/core/scss/vendor/_tom-select.scss @@ -54,29 +54,37 @@ $input-border-width: 1px; } } +// Every declaration below is `!important`: the bootstrap5 preset CSS targets +// these same selectors at equal specificity, and whichever stylesheet is +// included last otherwise wins outright (not just for z-index — the preset's +// `--bs-*` vars are undefined outside Bootstrap, so once it wins a property it +// renders as transparent/unstyled rather than merely off-theme) (#2600). .ts-dropdown { - z-index: $zindex-dropdown; - color: var(--body-color); - background: var(--bg-surface); - box-shadow: var(--shadow-dropdown); + // Tabler inits Tom Select with dropdownParent: 'body', so the dropdown is a + // direct child of rather than of whatever contains the