Semantic-ui-react: Popup: is misplaced in scrollable containers

[honzajerabek]

Bug Report

Might have been caused by #3607

Steps

1. Create Popup which has wider width than its container
2. Make the container overflow: scroll
3. Popup is wrongly positioned

Expected Result

Position should be relative to Popup's trigger. Should respect position prop

Actual Result

It seems that the right side of the Popup is positioned to the edge of the container, which pushes the left side further left, out of the trigger position. With overflow undefined it works as expected. See the testcase :)

Version

0.87.2
(0.87.1 works as expected)

Testcase

https://codesandbox.io/s/semantic-ui-react-kxrk7

[layershifter]

It's definitely caused by #3607, but a fix provided there was correct. You can change boundariesElement element via popperModifiers:

https://popper.js.org/popper-documentation.html#modifiers..preventOverflow.boundariesElement

<Popup
  popperModifiers={{ preventOverflow: { boundariesElement: "window" } }}
/>

https://codesandbox.io/s/semantic-ui-react-zf6pd

For me it looks like an edge case: positioning was correct only arrow is broken, but we can't fix this on our side 😭

[honzajerabek]

passing boundariesElement fixed the issue for me :)

[michaelketzer]

Can you please consider adding this to the docs?
I do not consider this as an edge case to be honest. Having an overflowing popup within a scroll area is really common. Basic example is a dialog, with a simple popup that is overflowing the content.

but we can't fix this on our side 😭

Have you ever considered, setting these attributes for popper in case someone explicite sets the mountNode of the popup to the body?
I mean, if I am using the body, I expect the positioning based on the window and not on a scroll container or dialog where the popup is used in the end.