Material-ui: 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.

• [x] This is not a v0.x issue.
• [x] 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: 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? :)

[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.

[doronnac]

Thanks for the heads up.

[zerefwayne]

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

[oliviertassinari]

@zerefwayne Yes, please, be sure to target the next branch :).

[alexsanchezdev]

@zerefwayne are you finally taking this issue?

[oliviertassinari]

@alxsnchez After a week of inactivity, it's safe to go for it :).

[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.