Autofocus input inside popper content causes scroll jump

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Opening a Popper with an autofocus input inside it, should not cause the page to jump (scroll).

Current Behavior 😯

It causes a scroll jump.

Reason

That happens because at the moment the popper element is appended to body, the styles are not applied yet (in the first render of the popper). Then react-dom detects an autofocus input is added to the dom and calls .focus() on it:

Then the browser behavior is to scroll the focused element into the view, which cases a jump.

Steps to Reproduce 🕹

Link: https://codesandbox.io/s/material-demo-clitd

1. click on the “Toggle Pupper” button.

Context 🔦

Not so important IMO.

Your Environment 🌎

Tech	Version
Material-UI	v4.2.1
React	16.8
Browser	Chrome
TypeScript	yes
etc.

[oliviertassinari]

@caitecoll It could be a timing issue with the autofocus behavior of iOS. Did you try to replace it with a React.useEffect?

[caitecoll]

@oliviertassinari Yes, thanks, that’s the workaround we used. Just to be clear, the issue is present in Safari desktop (haven’t tested on mobile).