Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TextField autoFocus prop does not shrink label #14132

Closed
2 tasks done
doronnac opened this issue Jan 9, 2019 · 15 comments
Closed
2 tasks done

TextField autoFocus prop does not shrink label #14132

doronnac opened this issue Jan 9, 2019 · 15 comments
Labels
bug 🐛 Something doesn't work component: text field This is the name of the generic UI component, not the React module! good first issue Great for first contributions. Enable to learn the contribution process.

Comments

@doronnac
Copy link

doronnac commented Jan 9, 2019

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
Copy link
Member

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

@doronnac
Copy link
Author

doronnac commented Jan 9, 2019

@joshwooding Sorry, fixed.

@oliviertassinari oliviertassinari added bug 🐛 Something doesn't work component: text field This is the name of the generic UI component, not the React module! labels Jan 11, 2019
@oliviertassinari
Copy link
Member

oliviertassinari commented Jan 11, 2019

@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:

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? :)

@oliviertassinari oliviertassinari added the good first issue Great for first contributions. Enable to learn the contribution process. label Jan 11, 2019
@joshwooding
Copy link
Member

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
Copy link
Author

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

@oliviertassinari
Copy link
Member

oliviertassinari commented Jan 12, 2019

@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

This comment has been minimized.

@zerefwayne

This comment has been minimized.

@oliviertassinari

This comment has been minimized.

@alexsanchezdev

This comment has been minimized.

@oliviertassinari

This comment has been minimized.

@eps1lon
Copy link
Member

eps1lon commented Jun 20, 2019

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
Copy link
Member

@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
Copy link
Member

eps1lon commented Jun 20, 2019

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.

@joshwooding joshwooding added the hacktoberfest https://hacktoberfest.digitalocean.com/ label Sep 30, 2019
@joshwooding joshwooding removed the hacktoberfest https://hacktoberfest.digitalocean.com/ label Nov 3, 2019
@oliviertassinari
Copy link
Member

I can no longer reproduce.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: text field This is the name of the generic UI component, not the React module! good first issue Great for first contributions. Enable to learn the contribution process.
Projects
None yet
Development

No branches or pull requests

6 participants