[Popover] Fix the scrolling issue when a Popover is inside an iframe

[michaldudak]

This is a partial fix of a problem described in #27584. With this fix, the page doesn't scroll to the top of the iframe, but it centers the Select in the viewport. It's not a perfect solution but it does improve the UX.

[mui-bot]

Details of bundle changes

Generated by :no_entry_sign: dangerJS against 011091b0393e1fdeb5eafb5e3599119d4813fd04

[guilhermeabell]

I managed to solve it as follows:

SelectProps={{ MenuProps:{ autoFocus: false, disableAutoFocusItem: true, disableEnforceFocus: true, disableAutoFocus: true, } }}

[mnajdova]

@michaldudak can you prepare a codesandbox to show that this works? I tried the package from the latest commit in https://codesandbox.io/s/naughty-haibt-jr5gq3?file=/package.json (see https://jr5gq3.csb.app/iframe.html), but the issue is the same.

[michaldudak]

I may have done something differently when testing this locally. It doesn't work on codesandbox indeed.

[guilhermeabell]

@mnajdova

I managed to solve it as follows:

SelectProps={{ MenuProps:{ autoFocus: false, disableAutoFocusItem: true, disableEnforceFocus: true, disableAutoFocus: true, } }}