TextField autoFocus prop does not shrink label

I’m developing a server rendered app with nextjs. When I set autoFocus={true} on the TextField component and refresh (page coming from server), TextField does not recognize the input focus and nothing changes (no shrink={true}, no css). This works correctly when navigating through the client.

• 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 🤔

`shrink` prop should be correctly set to `true` when input is focused via `autofocus={true}`, css should change to reflect focus state

Current Behavior 😯

`shrink` prop seem to not be affected, css does not change

Steps to Reproduce 🕹

Link:

https://codesandbox.io/s/8nov84y178

Please wait a few seconds for styles to load. Loading seems to be slow due to a specific issue with codesandbox, but it does highlight the issue more clearly.

Context 🔦

Your Environment 🌎

Tech	Version
Material-UI	v3.7.1
React	v16.6.3
Browser	Chrome
TypeScript	v3.2.2
etc.

[zerefwayne]

@oliviertassinari I’m want to contribute to material-ui, can I take up this issue?

[oliviertassinari]

@doronnac Thank you. I have a look at the issue. It’s definitely not an easy one to handle. Here are some important point to take into account:

• iOS doesn’t support autofocus.
• Setting the focus too late in the rendering cycle of the page, after the user starts scrolling can make it scrollbar jump.
• React might revisit the handling of the issue in React 17: https://github.com/facebook/react/issues/11159

I’m proposing the following change:

--- a/packages/material-ui/src/InputBase/InputBase.js
+++ b/packages/material-ui/src/InputBase/InputBase.js
@@ -139,6 +139,9 @@ export const styles = theme => {
   };
 };

+// This variable will be true once the server-side hydration is completed.
+let hydrationCompleted = false;
+
 /**
  * `InputBase` contains as few styles as possible.
  * It aims to be a simple building block for creating an input.
@@ -170,6 +173,14 @@ class InputBase extends React.Component {
     if (!this.isControlled) {
       this.checkDirty(this.inputRef);
     }
+
+    // Workaround https://github.com/facebook/react/issues/11159
+    if (!hydrationCompleted && this.inputRef === document.activeElement && !this.state.focused) {
+      this.handleFocus(null);
+    }
+
+    hydrationCompleted = true;
   }

   componentDidUpdate(prevProps) {
@@ -186,6 +197,7 @@ class InputBase extends React.Component {
   }

@joshwooding What do you think about it? @doronnac Do you want to work on it? 😃