Dropdown Input plugin together with popper causes page to scroll

[Leonick]

trafficstars

Describe the bug When popper is used to position the dropdown and the dropdown_input plugin is used the page scrolls to center the dropdown when it opens.

Popper is added as suggested in #163

I found #397 which also calls out this issue. There it is marked as a dupicate of #391 which has been fixed, but that fixed scrolling when dropdown closes, not when it opens.

I've tried taking the {preventScroll: true} that was applied in that fix and applying it to the .focus() slightly further up in the plugin that happens on dropdown_open but to no effect.

Since preventScroll didn't work there I searched for control_input and found self.control_input.focus(); on line 3239 of tom-select.complete.js adding preventScroll here solves the issue self.control_input.focus({preventScroll: true});. A proper fix might be more involved? But figured it was worthing noting.

To Reproduce Create an example on JSFiddle, CodePen or similar service and outline the steps for reproducing the bug.

1. Use the popper example from #163 https://jsfiddle.net/ok56a0gu/
2. Add plugins: ['dropdown_input'] to the configuration
3. Run new configuration
4. Click the demo select box. The demo frame will scroll in an undesirable manner

Expected behavior The dropdown should appear above or below dependning on where the is space, the window shouldn't scroll.

Additional context Add any other context about the problem here.

• OS: Windows 11
• Browser Edge
• Version 117

[pvh-archifact]

Not the best solution but a workaround, try to use the strategy: 'fixed' in the popper settings

 this.popper = Popper.createPopper(this.control, this.dropdown,{
strategy: "fixed"
}); 

[github-actions[bot]]

This issue has not been active in 120 days and has been marked "stale". Remove stale label or comment or this will be closed in 15 days