Material-ui: TextField Outline Legend width does not get calculated correctly on label prop change

[ASHFAQPATWARI]

The border of a TextField with variant="outlined" does not update correctly when new label props are being passed into the component on language change. I am using key prop which changes on language change and this makes my input legend to render again but with wrong calculations

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

The width of legend should be calculated properly

Current Behavior 😯

The legend width is not calculated correctly.
Initial render:

After language switch:

Steps to Reproduce 🕹

Link:

1.
2.
3.
4.

Context 🔦

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | v4.3.0 |
| React | 16.8.6 |
| Browser | Chrome |

[oliviertassinari]

@ASHFAQPATWARI There are a couple of related issues:

• #14530: First render is hidden
• #15142: Update label to show error

[ASHFAQPATWARI]

@oliviertassinari This is not a duplicated issue. It seems similar to issues mentionedby you but in my case, adding key prop also does not help as application is becoming LTR/RTL with language switch and legend width calculation is not correct as shown in attached image

[oliviertassinari]

@ASHFAQPATWARI Do you have a reproduction?

[ASHFAQPATWARI]

@oliviertassinari here you go: https://codesandbox.io/s/react-hook-form-issue-on-first-click-gqcif

[oliviertassinari]

@ASHFAQPATWARI Thanks, it's a bug with our styling solution. You can work around the problem with disableGlobal: https://codesandbox.io/s/react-hook-form-issue-on-first-click-1zi6b. I think that we should synchronously remove the CSS instead of waiting for the next frame.

[ASHFAQPATWARI]

@oliviertassinari The bug doesn't appear if i put key prop on both my inputs. https://codesandbox.io/s/react-hook-form-issue-on-first-click-gqcif

[ASHFAQPATWARI]

@oliviertassinari Putting the key prop results in reference being updated and form validations doesn't work. Have a look at this: https://github.com/bluebill1049/react-hook-form/issues/177

[bluebill1049]

happy to assist and provide information here.

[ryancogswell]

@oliviertassinari - The main issue I see is the effect that sets the label width does not re-execute when the label changes. The label should be added to the dependency array.

diff --git a/packages/material-ui/src/TextField/TextField.js b/packages/material-ui/src/TextField/TextField.js
index 9f595cca402..5731270e405 100644
--- a/packages/material-ui/src/TextField/TextField.js
+++ b/packages/material-ui/src/TextField/TextField.js
@@ -99,7 +99,7 @@ const TextField = React.forwardRef(function TextField(props, ref) {
       const labelNode = ReactDOM.findDOMNode(labelRef.current);
       setLabelWidth(labelNode != null ? labelNode.offsetWidth : 0);
     }
-  }, [variant, required]);
+  }, [variant, required, label]);

   warning(
     !select || Boolean(children),

Here is a codesandbox demonstrating a fixed version alongside the current version as the label changes (by clicking the button).

FYI - I found this issue after seeing a StackOverflow question related to this problem.

[oliviertassinari]

@ryancogswell We have left the label out of the dependency array to discourage people from changing it. But I think that you are right. It's another possible solution, +1 for going for it.

@ASHFAQPATWARI Do you want to submit a pull request? :)

[ASHFAQPATWARI]

@oliviertassinari I will not be able to submit a pull request. I am running with very tight deadlines

[oliviertassinari]

No problem, maybe somebody else will :).

[wojtczal]

@oliviertassinari is using the key prop the library recommended way of handling outline resize when label changes?

[oliviertassinari]

No, this trick is no longer needed with the latest version.