[EuiFlyout] Popover and other positioned elements within should not scroll with the page

[matchatype]

Absolutely positioned elements do not seem to work correctly when they are wrapped in a flyout component. They scroll with the rest of the page.

Check the "More complicated flyout" on the official style guide for reproduction.

[snide]

This is mostly capture by #1236

I'll close that one, since this one has a more general writeup.

[cchaos]

The solution is to add repositionOnScroll={true} to the EuiPopover component. We've talked about a long-term goal that might be able to pass down a context to all EuiFlyout contents in order to supply this automatically. I'll leave this ticket open as a reminder of that goal.

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[cchaos]

I've added this as a bullet point to #4439, so we don't need this ticket to stay open.

[neeerajtk]

I had a similar issue when using EuiPopover inside EuiBasicTable. The popover moved along with the scroll. Solved it by adding onScroll event handler on the wrapping div of EuiBasicTable . onScroll={() => handleOpenedPopover(null)}