[Popover] Positioning overlap with anchorEl when opened near the bottom of the viewport

[jacob-mauro]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

The popover overlaps the anchorEl.

Expected behavior 🤔

The popover goes above the anchorEl.

Steps to reproduce 🕹

This can be reproduced on the Popover anchor playground.

Steps:

1. Set the anchorOrigin.vertical property to bottom. The popover should now be opening below the anchorEl.
2. Scroll down so that the anchorEl is at the bottom of the viewport.
   1. Playing around with small scrolling adjustments near the bottom of the viewport yields multiple different popover positioning results, i.e. at the very bottom of the viewport, partially cut off by the bottom of the viewport, and a few pixels above the bottom of the viewport.
3. Click on the anchorEl to open the popover.

Context 🔦

I am trying to implement a Menu where, when the menu is opened, the menu items are listed below the anchorEl. Additionally, when the user opens the menu near the bottom of the viewport, I would like the menu items to automatically adjust and open above the anchorEl, without overlapping it.

Your environment 🌎

Environment info excluded since this issue is reproducible on the MUI popover anchor playground.

[linabarkaoui]

Hi, I want to work on this issue. Can someone assign it to me?

[indrasenakatam]

Can you please help if there is any temporary fix for this? currently hoverMenu overlapping (showing on-top when page scrolls to down, showing on-bottom when page scrolls to top) if there is not enough length for the drop-down list. So, it's overlapping it's anchor item

https://stackoverflow.com/questions/61447998/material-ui-popover-position-on-small-screen