TextField autoFocus prop does not shrink label

[doronnac]

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.

[joshwooding]

I get an Internal Server Error when trying to run the codesandbox you provided

[doronnac]

@joshwooding Sorry, fixed.

[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: autoFocus doesn't work with SSR in React 16 facebook/react#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? :)

[joshwooding]

Hmm, seems like a good workaround. When I was looking at it the label shrank when i swapped tabs away from it and back again

[doronnac]

@oliviertassinari I'd like to but it might take a while.

[oliviertassinari]

@doronnac Don't worry, the issue won't move :).
Also, using autofocus isn't encouraged from an accessibility point of view: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md.

[eps1lon]

The problem is with autoFocus on hydration which is marked as fixed in react. There should be no workaround required. It seems like there is an underlying issue that is not yet identified.

The workaround might apply the styles but the input won't actually be focused.

[oliviertassinari]

@eps1lon I'm not sure to follow. From my understanding of https://codesandbox.io/s/8nov84y178. The input is focused. However, the onFocus event is not called. I was proposing to simulate the trigger of the focus event when the input is focused but the state is not.

[eps1lon]

It didn't work for me sometimes. There's something else wrong. It's definitely not the linked react issue since that has been fixed.

[oliviertassinari]

I can no longer reproduce.