TomSelect selectSize Option

[pambrose]

The TomSelect selectSize options is described in the docs as "The number of visible options." I would expect that to mean that it limits the window size, but keeps all the options available for selection via scrolling. However, it does work that way. If selectSize is specified, the options are truncated to that number and it does not necessarily affect the visible window size. I wanted to check to see if that seems right to you.

I created a demo repo here: https://github.com/pambrose/kvision-tomselect-issue If you run the app, you can see 3 examples of TomSelect that demonstrate varying selectSize usage.

Thanks for your efforts with kvision. It is a great framework.

[rjaros]

Hi

The selectSize option is mapped directly to the maxOptions setting of TomSelect (https://tom-select.js.org/docs/#maxoptions), which is implemented like this and I have no way to change it.

I don't remember why I've used a different name for this option. I'll probably change it to maxOptions in the next major release I'm working on right now.

The max height of the dropdown window is hardcoded in TomSelect css (as max-height: 200px;). You can overwrite this with a bit of custom css:

// top level variable
val myStyle = style {
    style(".ts-dropdown-content") {
        maxHeight = 400.px
    }
}

TomSelect(options = listItems) {
    addCssStyle(myStyle)
}

or programmatically with a code like this (note: this will work only in the next release, because I've found a bug in TomSelect component refresh code):

TomSelect(options = listItems) {
    input.addAfterInsertHook {
        input.tomSelectJs?.on("dropdown_open") { d: dynamic ->
            d.unsafeCast<HTMLElement>().querySelector(".ts-dropdown-content")
                ?.setAttribute("style", "max-height: 400px;")
        }
    }
}

[pambrose]

Excellent. Thanks Robert.