[Popover] Height and width animations are not working as expected due to top and left properties

[Ashishdce]

Popover always positions itself using top and left properties. But if we change the height or width of the content, popover always grow vertically downwards in case of height or towards the right in case of width.

• [ *] 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 😯

Expected Behavior 🤔

We should be able to control the properties using which popover should position itself. Depending on the usecase, user should be able to choose a combination of top/bottom and right/left.

Steps to Reproduce 🕹

You can see the issue here.
https://codesandbox.io/s/twilight-architecture-dqn2n?file=/src/App.js

Steps:

1. Click on the Open Popover button
2. Click on expand

The popover grows downwards covering the anchor element. And repositions itself when the Shrink button is clicked.

We can use a prop to supply what properties the popover should use. I would be happy to raise a PR for this.

Context 🔦

Your Environment 🌎

Tech	Version
Material-UI	v4.10.2
React
Browser
TypeScript
etc.

[oliviertassinari]

We plan to replace the positioning logic of the Popover component with the Popper one. It should address this problem at the same time.

[Ashishdce]

Great. Thanks.

[ahmetuysal]

Any updates on this issue?

[AlexeyUryvaev]

@oliviertassinari

We plan to replace the positioning logic of the Popover component with the Popper one. It should address this problem at the same time.

Hi! Any chance of fixing this in the near future?

[seemX17]

@oliviertassinari
Are we planning to fix this issue anytime soon? Is there a workaround for this?