Unusual dropdown positioning when within a scrolling element (overflow-auto)

[dliebner]

Environment:

• Issue reproducible on latest Chrome and Firefox.
• Bootstrap 4.1.3
• boostrap-select 1.13.17

I haven't been able to recreate this issue in an isolated test case, so I'm linking to a live example:
https://carsheet.io The affected dropdowns are within the Filters menu.

What's happening is the dropdowns are being positioned/sized in a non-ideal way depending on the available space above/below the select in the container element (which is scrolling / overflow-auto).

Here's our container:

Here's a visual on the unusual positioning:

As you can see, when the container element is scrolled such that there is room for the dropdown to display all of its options immediately below the select, it does get positioned there. If you begin to scroll up or down to where the dropdown will no longer fit perfectly in the available space, the dropdown repositions to stick to the top of the container element, rather than staying in place just below the select and adjusting the height of the dropdown for the available vertical room. Inspecting the styling in the browser, it looks like it's using translate3d to accomplish this, but I couldn't find any usage of translate3d in the source code, so I'm confused about which part of the code is actually causing this behavior.

[caseyjhol]

If you set data-display="static" on the select element, does that fix it? bootstrap-select is using a hybrid combination of Popper.js and our own logic to determine menu positioning/size. Setting data-display="static" disables Popper.js. If that doesn't work, does setting data-container to the scrolling element make any difference?

[dliebner]

So setting data-display="static" does improve the situation somewhat by eliminating the weird floaty behavior. The dropdowns now stick below the select; however it also removes the behavior that intelligently resizes the dropdown based on available space, but perhaps that is functionality I could code myself. Sounds like the issue is with Popper.js, I'll take a look into that, thanks.

[dliebner]

Related issue: twbs/bootstrap#24251

How might I pass the boundary option to the dropdown?

EDIT: Nevermind, I figured out how, but it didn't help. Continuing to search for a possible known issue with Popper.

[dliebner]

So I would argue the issue is with getSelectPosition(). The resizing of the dropdown is done based on $window height and scroll, when it should be based on the dropdown's scrollParent which isn't necessarily always the window. In this case, it's the closest ancestor with overflow: auto.