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.

Sign up for GitHub

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

Jump to bottom

[TextField] Outlined label gap is delayed after server-side hydration #17305

Closed
2 tasks done
taime opened this issue Sep 3, 2019 · 7 comments · Fixed by #17680
Closed
2 tasks done

[TextField] Outlined label gap is delayed after server-side hydration #17305

taime opened this issue Sep 3, 2019 · 7 comments · Fixed by #17680
Labels
bug 🐛 Something doesn't work component: text field This is the name of the generic UI component, not the React module!

Comments

@taime
Copy link

taime commented Sep 3, 2019 •
edited by oliviertassinari
Loading

After page load, the first time elements has default browser css styles and only after 1-3 second they became as they should be (look at the video https://cl.ly/c374d670fe2a )
label_issue

  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

I see changing styles while the page is being rendered. Here is video with the issue video of the issue.

Expected Behavior 🤔

Render correctly styled element immediately

Steps to Reproduce 🕹

Steps:

  1. Clone the repo https://github.com/mui-org/material-ui/tree/master/examples/nextjs
  2. Add any element (I use the <TextField Element variant="outlined" /> for example)
  3. Push The Refresh button in you browser and you will see this issue

Your Environment 🌎

Tech Version
Material-UI v4.4.0
React latest
Browser Chrome
OS Mac OS
@oliviertassinari oliviertassinari added waiting for user information component: text field This is the name of the generic UI component, not the React module! support: question Community support but can be turned into an improvement and removed waiting for user information labels Sep 4, 2019
@oliviertassinari
Copy link
Member

oliviertassinari commented Sep 4, 2019 •
edited
Loading

I use the <TextField Element variant="outlined" />

This is expected, we rely on the availability of the layout measurements to correctly position the gap for the label. You could work around the problem by setting a background color to the label that matches the background. We could document this limitation in https://material-ui.com/components/text-fields/#limitations. Do you want to handle it? :)

@oliviertassinari oliviertassinari added docs Improvements or additions to the documentation help appreciated and removed support: question Community support but can be turned into an improvement labels Sep 4, 2019
@taime

This comment has been minimized.

Sign in to view
@oliviertassinari

This comment has been minimized.

Sign in to view
@oliviertassinari oliviertassinari added good first issue Great for first contributions. Enable to learn the contribution process. and removed help appreciated labels Sep 27, 2019
@mui mui deleted a comment from taime Sep 27, 2019
@oliviertassinari oliviertassinari changed the title Some styles loads with delay after the page first render! TextField outlined gap delay after the page first render Sep 27, 2019
@oliviertassinari oliviertassinari changed the title TextField outlined gap delay after the page first render Outlined TextField Notch is delay after server-side rendering Sep 27, 2019
@oliviertassinari oliviertassinari changed the title Outlined TextField Notch is delay after server-side rendering Outlined TextField Notch is delayed after server-side rendering Sep 27, 2019
@oliviertassinari oliviertassinari mentioned this issue Sep 27, 2019
Closed
1 task
@joshwooding joshwooding added the hacktoberfest https://hacktoberfest.digitalocean.com/ label Sep 30, 2019
@oliviertassinari oliviertassinari mentioned this issue Oct 9, 2019
Closed
@adeelibr
Copy link
Contributor

I use the <TextField Element variant="outlined" />

This is expected, we rely on the availability of the layout measurements to correctly position the gap for the label. You could work around the problem by setting a background color to the label that matches the background. We could document this limitation in https://material-ui.com/components/text-fields/#limitations. Do you want to handle it? :)

@oliviertassinari Can I document this if possible 😄

@joshwooding
Copy link
Member

It would be nice for this to wait for #17483

@oliviertassinari
Copy link
Member

Agree, we should also wait for the direction #17680 takes.

@oliviertassinari oliviertassinari added hacktoberfest https://hacktoberfest.digitalocean.com/ and removed hacktoberfest https://hacktoberfest.digitalocean.com/ labels Oct 13, 2019
@joshwooding joshwooding removed the hacktoberfest https://hacktoberfest.digitalocean.com/ label Nov 3, 2019
@oliviertassinari oliviertassinari mentioned this issue Nov 24, 2019
Merged
@oliviertassinari oliviertassinari removed the good first issue Great for first contributions. Enable to learn the contribution process. label Nov 30, 2019
@oliviertassinari
Copy link
Member

We have found a solid solution in #17680. It should do it.

@oliviertassinari oliviertassinari changed the title Outlined TextField Notch is delayed after server-side rendering [TextField] Outlined label gap is delayed after server-side rendering Nov 30, 2019
@oliviertassinari oliviertassinari changed the title [TextField] Outlined label gap is delayed after server-side rendering [TextField] Outlined label gap is delayed after server-side hydration Nov 30, 2019
@oliviertassinari oliviertassinari added bug 🐛 Something doesn't work and removed docs Improvements or additions to the documentation labels Nov 30, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug 🐛 Something doesn't work component: text field This is the name of the generic UI component, not the React module!
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[OutlinedInput] Fix offscreen label strikethrough eps1lon/material-ui
4 participants
@taime @oliviertassinari @joshwooding @adeelibr