TextField Label shrinked on state update

[gfsd3v]

Hello guys, I'm making a multi step form where I have the current step in the state and a function that changes the TextFields that are shown accordingly to the step state. The issue that i'm having is if any TextField that inherit the position of a TextField with a startAdornment has is label shrinked.

Steps to Reproduce 🕹

You can reproduce the error on the codesandbox below, just click in the next button https://codesandbox.io/s/suspicious-mestorf-64m8k2mvxr

Thanks for the help and for the awesome project, much love <3

[oliviertassinari]

@gfsd3v We have had a similar discussion about the problem in #15386 (comment) cc @eps1lon.

You can work around the problem by adding a key to the fragment: https://codesandbox.io/s/label-shrink-bug-with-start-adornament-376c1.

[gfsd3v]

@oliviertassinari Now I understood what was happening, thank you so much for the help and I'm sorry I wasn't able to find #15386, I'll be more thoroughly in my searches next time, thanks again.

[oliviertassinari]

@gfsd3v No problem, no need to be sorry! Well, we might be able to find a better solution, but it's not obvious to me.

[eps1lon]

That's probably one case where we should actually fix it. It's not apparent in the code that react doesn't think it should re-mount those components. The problem is that label can be any renderable node so putting it into effect dependencies might be overzealous.

It's probably best to add a section in our docs since this is a very common issue.

[oliviertassinari]

We have explored a solution in #17680 that seems to be good enough, it will likely solve this problem.