Height on narrow selects is too tall

[danstewart]

Describe the bug
Inner input is visible for narrow selects, even with a default value.

To Reproduce
Steps to reproduce the behavior:

1. Create a select with a width a bit bigger than the contents

Here is a JSFiddle showing the issue:
https://jsfiddle.net/3yjzwhaq/

Expected behavior
Input should be hidden if a value is set.
It looks like when manually selecting a value the input is given the following styles:

style="opacity: 0; position: absolute; left: -10000px;"

Additional context
Add any other context about the problem here.

• OS: [Ubuntu 20.04]
• Browser [Firefox]
• Version [88.0.1]
• Device: [Desktop]

Tested with same result on Chromium 90.0.4430.212

---

Manually setting the style is a good workaround:

document.querySelector('#my-select-tomselected').style = "opacity: 0; position: absolute; left: -10000px"

[oyejorge]

Here's a CSS only workaround as well

.input-hidden > .ts-input > input{
  display:none !important;
}

[oyejorge]

Thanks! I'll have an updated release out shortly

[danstewart]

Nice one, thanks a lot!

[iazaran]

This one can hide it just if it has value:

.ts-input.has-items > input {
    display: none !important;
}

[oyejorge]

This one can hide it just if it has value:...

Yeah, that was a bad suggestion on my part

[danstewart]

Workaround for V2:

.ts-wrapper.has-items > .ts-control > input {
    display: none !important;
}