[Popover] Get broken when using an image as children

[edgar-arroyo-by]

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

Current Behavior 😯

After opening the popover twice, if its children is an image, it get broken.

Expected Behavior 🤔

After opening the popover twice, it continue working properly when having an image as a children

Steps to Reproduce 🕹

https://codesandbox.io/s/material-demo-forked-osozn?file=/demo.tsx

Steps:

1. Open the popover
2. Close it
3. Open it again

Context 🔦

Just want to show an image inside a popover

[mnajdova]

After opening the popover twice, if its children is an image, it get broken.

Can you clarify what means broken? I can open the Popover on the link multiple times without issues.

[edgar-arroyo-by]

hello there @mnajdova, thanks for your comment

After the first time, you will notice that the position is changed. Like if it lost its anchor element position.

[Quintis1212]

Hi @edgar-arroyo-by ) I will try to fix this

[siriwatknp]

@edgar-arroyo-by I believe that this is not a bug in material-ui but an expected behavior because of img is not loaded, so popover cannot calculate the width, after first open image is loaded so the next time you click on the button popover can calculate the width.

I see 2 ways to workaround on this.

1. pass keepMounted prop to <Popover keepMounted />. This way the img is render and popover is able to calculate the width before user click on the button. However, the popover is now render
2. pass width height to <img width="1000" height="500" /> to let popover pick up the width even the image is not loaded. https://web.dev/optimize-cls/#modern-best-practice

[edgar-arroyo-by]

hello there @siriwatknp

you are completely right, thank you a lot for your response!

[oliviertassinari]

@siriwatknp It's also related to #22519. Assuming we rewrite Popover to position with Popper, then we would fix this issue with no extra work once #22303 is done.