[Bug] Popover locations for Sorting Controls overflowing

[thehig]

• I have searched this repository's issues and believe that this is not a duplicate.

I'm using ...

• React Grid
• React Chart
• Vue Grid

Current Behaviour

When creating a constrained table that performs its' own horizontal scrolling and utilizes the <TableHeaderRow showSortingControls />, shrinking the container beyond a minimum size will cause the entire page to create a horizontal scrollbar

Expected Behaviour

The usage of the Sorting Controls should not overflow the bounds of the Table

Steps to Reproduce (for Bugs)

Code Sample: https://codesandbox.io/s/rmpn3lw2zo

Using a Chrome plugin called Pesticide we can make the sorting control divs visible

And the corresponding HTML, showing that the popups are 'outside' the root of the application, which is as intended of course, but means i'm not sure how to resolve this

The popup anchors do update when resizing at larger sizes, but below some point, they stop tracking the corresponding UI components. However, performing mouseover on the Table Header (bringing up the 'sort' bubble) causes the popup to 'retrack' to the Header, and the scrollbar shrinks or goes away

[kvet]

Hi,
 
I've reproduced the issue and forwarded it to the original repository. Here is the link to the issue: mui/material-ui#12132
 
Now, as a workaround, I suggest you apply the following styles to the body element: overflow-x: hidden.

[thehig]

Thanks for forwarding the issue, much appreciated.

As for the workaround, I already tried that to no avail, but thanks for the suggestion

[thehig]

This has been resolved by the MUI team and the corresponding dependency update. Thanks! ❤️

[lock]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests.