Make Dropdown Stay on Screen

[MatthewKennedy]

One thing I have noticed when migrating to Tom-select is the popover (drop down) is not aware of its position on screen, so if you have a select that is near the bottom of the screen when opening the options are displayed off the bottom of the screen.

I think other similar libs use popper.js to get around this opening above the selector when near the bottom of the screen.

[oyejorge]

popper.js is correct: https://jsfiddle.net/ok56a0gu/

[MatthewKennedy]

That worked a treat, thanks.

[fabienwnklr]

im not sure it's good to include entire library for only one feature, isn't hard to develope this feature..

[maryisdead]

I implemented a self-contained fix that doesn't rely on Popper.js or anything else.

It basically checks if there's not enough room below the select and then checks if there would be enough room above. Only then it will place the dropdown above. Felt the most natural for me.

The checks are only done when the dropdown is open and in addition are throttled via an interval.

The changes are ultimately applied through CSS (see below) but might as well be incorporated with the JS (this.wrapper.style[…]). CSS just is cleaner for my needs.

Demo over at JSFiddle. It's pretty smooth.

new TomSelect("#select-tags", {
    onInitialize: function() {
        this.dropdownWatch = null;
        this.dropdownWatchCb = () => {
            if (this.isOpen) {
                const controlRect = this.control.getBoundingClientRect();
                const dropdownRect = this.dropdown.getBoundingClientRect();
                const spaceAbove = controlRect.top;
                const spaceBelow = window.innerHeight - controlRect.bottom;
                
                if (spaceBelow < dropdownRect.height && spaceAbove > spaceBelow) {
                    this.wrapper.classList.add('dropdown-top');
                } else {
                    this.wrapper.classList.remove('dropdown-top');
                }
            }
        }
    },
    onDropdownOpen: function() {
        this.dropdownWatchCb();
        this.dropdownWatch = setInterval(this.dropdownWatchCb, 250);
    },
    onDropdownClose: function() {
        clearInterval(this.dropdownWatch)
    },
});

// Selector depends on your version/mark-up. I actually only needed the latter one.
.ts-control.dropdown-top .ts-dropdown,
.ts-wrapper.dropdown-top .ts-dropdown {
    bottom: 100%;
    top: auto;
}