-
-
Notifications
You must be signed in to change notification settings - Fork 32.4k
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
Comments
I get an Internal Server Error when trying to run the codesandbox you provided |
@joshwooding Sorry, fixed. |
@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? :) |
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 |
@oliviertassinari I'd like to but it might take a while. |
@doronnac Don't worry, the issue won't move :). |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
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. |
@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. |
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. |
I can no longer reproduce. |
I'm developing a server rendered app with
nextjs
.When I set
autoFocus={true}
on theTextField
component and refresh (page coming from server), TextField does not recognize the input focus and nothing changes (noshrink={true}
, no css).This works correctly when navigating through the client.
Expected Behavior 🤔
Current Behavior 😯
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 🌎
The text was updated successfully, but these errors were encountered: