[Popper] When placement is set to "right" or "left", placement doesn't update based on viewport position

[caitecoll]

When placement is set to any value beginning with top or bottom, the placement will update dynamically if there isn't sufficient vertical space on the screen to place the Popper in that position. This is not true for any right or left placements. Ideally, right-start could dynamically update to right-end, etc.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

If placement value begins with right or left, vertical placement does not update based on screen position.

Expected Behavior 🤔

Placement updates dynamically to attempt to keep the popper visible to the user. For instance, when placement is set to right-start, but the anchor is at the bottom of the screen, placement will update to right-end.

Steps to Reproduce 🕹

codesandbox

Steps:

1. Scroll until "Toggle Popper" button is at the bottom of the screen.
2. Click the button to open the popper.
3. Note that the popper is not fully visible.

Context 🔦

We use this popper (with placement="right-start") to allow users to select from a list of actions. The popper can be up to 340px tall, and in many cases most of it is rendering offscreen. Dynamic vertical placement would help considerably.

Tech	Version
Material-UI	4.11.0
React	16.10.0
Browser	Chrome
TypeScript	3.8.3

[oliviertassinari]

@caitecoll Have a look at https://github.com/popperjs/popper-core, it's the positioning engine we use.

[caitecoll]

@oliviertassinari Thanks for the link. I'm looking at the second demo ("Overflow prevention") on that library's demo site, and it seems like placement="right" is working correctly there. Is there something extra that I need to configure or override on MaterialUI's Popper in order for it to work like that demo?

[oliviertassinari]

The following fixes the issue:

<Popper
  id={id}
  open={open}
  anchorEl={anchorEl}
  placement="right-start"
  modifiers={{
    preventOverflow: {
      boundariesElement: "viewport"
    }
  }}
>

However, the implementation doesn't match the comment:

https://github.com/mui-org/material-ui/blob/1c2055a95c85b025720f2fe8f2322852d2ed4835/packages/material-ui/src/Popper/Popper.js#L130-L133

I think that we can try:

diff --git a/packages/material-ui/src/Popper/Popper.js b/packages/material-ui/src/Popper/Popper.js
index f5e70dce68..67db3cf431 100644
--- a/packages/material-ui/src/Popper/Popper.js
+++ b/packages/material-ui/src/Popper/Popper.js
@@ -129,7 +129,7 @@ const Popper = React.forwardRef(function Popper(props, ref) {
           : {
               // It's using scrollParent by default, we can use the viewport when using a portal.
               preventOverflow: {
-                boundariesElement: 'window',
+                boundariesElement: 'viewport',
               },
             }),
         ...modifiers,

We changed it in #12168 but it was coupled with something else. I can't reproduce the issue.

[caitecoll]

Thanks so much for the fix! I overlooked that modifiers prop in the API documentation. It fixed our issue, and I really appreciate the help.