Blueprint: Popover does not position correctly when inside scrollable div

[theaeolianmachine]

Environment

• __Package version(s)__: Core 3.24.0
• __Browser and OS versions__: Chrome, Firefox (Latest)

If possible, link to a minimal repro (fork this code sandbox): https://codesandbox.io/s/blueprint-sandbox-3k00j?file=/src/index.tsx

Steps to reproduce

1. Create several select boxes (which utilizes a popover) inside of a scrollable div (overflow set to auto, some max-height that is smaller than the size of the boxes to force a scrollbar).
2. Click on any of the select boxes, and note that the select popover is way off from the target.

Actual behavior

None of the popovers align anymore. This can also be reproduced with a regular popover as well - essentially we have a list of rows that each contain a dropdown and also a text field which uses a popover whenever there the input is invalidated client-side. Changing the surrounding div to the above state causes it where the popover no longer respects the Position class with where it goes.

Expected behavior

That it aligns as normal.

Possible solution

I'd love to know that I'm doing something wrong with how to use this, so if there's something that can be done to place multiple select boxes in a scrollable section without causing the popover alignment to go haywire, I'm all ears :)

[theaeolianmachine]

It appears that it's aligning with the surrounding div rather than the target the popover surrounds.

[adidahiya]

Popover uses popper.js for positioning; have you tried adjusting any of the available modifiers?

[theaeolianmachine]

That's not actually helpful here, unfortunately — the select we use is used in various other places as a reusable component — changing the popover modifiers would change it for all of them (in particular, for locations where they are aligned correctly).. In addition, we have where the popup position is off as well. It seems like they're aligning on the div itself, which also seems problematic for using components since they'll need to be tweaked differently based on the context.

I went ahead and updated the repro to show how both the selects and the popover position for the inputboxes are off from each other.

[theaeolianmachine]

Something I have unfortunately not been able to repro in a sandbox is that the input box actually doesn't respect the popover position — if I say position.RIGHT, it stays at position.LEFT. position.TOP however does mimic the behavior in the sandbox.

[theaeolianmachine]

Sorry here's the updated link: https://codesandbox.io/s/blueprint-sandbox-3k00j?file=/src/index.tsx

[theaeolianmachine]

Also just for posterity's sake, I did try various modifiers - offset, keepTogether, prevent overflow, etc., and it quickly became a mess 🤷‍♂

[johanwilson]

You are looking for boundary="viewport"

Available options:

• scrollParent - _default which is the root cause_
• viewport
• window

Determines the boundary element used by Popper for its flip and preventOverflow modifiers. Three shorthand keywords are supported; Popper will find the correct DOM element itself.

Check this sandbox

[theaeolianmachine]

Thanks @johanwilson, this did the trick! It's probably worth adding some extra docs explaining this better as the v1 Popper docs are pretty minimal these days, and even v2 I wouldn't say really goes into explanation of how the various boundary modifiers interact with each other — would make Blueprint the better citizen here. Appreciate everyone looking into this!

[theaeolianmachine]

Actually, nevermind. It appeared to work at first, but now it just aligns at the very top of the screen. I'll see if I can get a sandbox repro to work.

[theaeolianmachine]

OK nevermind, figured it out — if the dev tools window is opened, it doesn't aligned properly. However, it works just fine for normal users.

[theaeolianmachine]

For the record in case you have any interest at all into looking into that, if you use @johanwilson's sandbox it repros when dev tools are open on the bottom part of the doc in both chrome and firefox. For those better at front-end web than I am, maybe there's a logical answer to this, but it's good enough for me as it is :)