search

orchidjs / tom-select

Tom Select is a lightweight (~16kb gzipped) hybrid of a textbox and select box. Forked from selectize.js to provide a framework agnostic autocomplete widget with native-feeling keyboard navigation. Useful for tagging, contact lists, etc.
https://tom-select.js.org
Apache License 2.0
1.66k stars 123 forks source link

Bootstrap5 -- Should `.ts-wrapper` be prepended rather than appended? #327

Closed groovenectar closed 2 years ago

groovenectar commented 2 years ago

Here is a video demonstration of what happens when changing the order of elements: https://files.catbox.moe/owx8q3.mp4

If a Bootstrap5 theme uses a border radius, it appears to be lost when using TomSelect. But only because of a first-child selector... Since the .ts-wrapper element also uses the .form-select class, and the real select is hidden... Perhaps it would make sense to have .ts-wrapper as the first-child, rather than the hidden select...

Here is the CSS from a Bootstrap 5 theme (from Bootswatch)... Without Tom Select initialized, the border radius displays... but initializing Tom Select causes the element to get pushed down from its position in the DOM:

.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

I believe this is the relevant spot where the appending happens: https://github.com/orchidjs/tom-select/blob/7a7744226ac9b6e12fc428b9cfedba126d48af67/src/tom-select.ts#L172

There does not currently appear to be a prepend function in utils.ts... I wonder if it's worth a toggle option of some kind?

oyejorge commented 2 years ago

Thanks for the bug report. Can you include a jsfiddle that demonstrates the problem? You might want to use one of these examples as a starter: https://tom-select.js.org/examples/styling/