[OutlinedInput] InputLabelProps.shrink=true causes border to run through label

[chrisparton1991]

• 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 🤔

An input that is force shrunk should not have the border intersecting with the label text.

Current Behavior 😯

On creation, the border cuts through the label text, and animates to the correct display.

Steps to Reproduce 🕹

Link: https://codesandbox.io/s/grid-pw67o

1. Pay attention to the "Border glitch" label on the input.
2. Notice that on creation, the border cuts through the text.
3. I've got the component remounting every second, to make the issue more obvious.

I think the solution is to omit this NotchedOutline transition when a label is set to shrink.

Context 🔦

I have a form that appears when items are clicked. The inputs all exhibit this effect.

Your Environment 🌎

Tech	Version
Material-UI	v4.2.1
React	v16.8.6
Browser	Firefox 68.0.1
TypeScript	N/A
etc.	N/A

[oliviertassinari]

@chrisparton1991 Interesting, thanks for reporting. I believe that we should be using a layout effet here:
https://github.com/mui-org/material-ui/blob/ae5bc56dfe133e363520f7d53f87ccb5009aeb51/packages/material-ui/src/TextField/TextField.js#L96

Would it work in your case? Do you want to submit a pull request? :)

[chrisparton1991]

@oliviertassinari thanks for the suggestion! I tried useLayoutEffect in page of useEffect on that line, but unfortunately the issue persists. I verified in the debugger that my changes were live in the browser.

It makes sense that setting the width as a layout effect could work, but the CSS transition must already be applied to the element before the layout effect runs.

[chrisparton1991]

Or possibly because setLabelWidth is updating a state variable, which doesn't get applied until the next render?

[oliviertassinari]

I don't understand why it doesn't work. We use a similar approach with https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/NoSsr/NoSsr.js.

[chrisparton1991]

Perhaps the difference is that, in NoSsr, the state is defaulted to false (i.e. don't mount the component), so it doesn't matter that the useEffect/useLayoutEffect runs after the first render.

My theory is that the TextField is rendering with a 0px width initially, then once the labelRef is populated (which occurs after the label has been added to the DOM), TextField re-renders with the updated width, causing the border width transition.

I'm by no means an expert on hooks though, so I could very well be wrong!

[oliviertassinari]

We have explored a CSS pure implementation in #17680. It should solve the problem.