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

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

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:

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:

• The label value in outlined overlaps the border #14530: First render is hidden
• TextField's outline doesn't resize when label prop changes #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: react-hook-form/react-hook-form#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.

[LavaGolem]

is this fix in V4?

I tried adding key and all, but I still get border crossing the label.

[oliviertassinari]

@LavaGolem Try on v5.0.0-beta.1

[LavaGolem]

Hi so two things

1. I can't update to v5 (team policy)
2. I'm actually not conditionally rendering label, labels are fixed but for the longer labels border is overlapping the text, I can't find any issues regarding label length or something

as I said adding key didn't solve the issue, also this TextField is used inside of Field component, not sure if it is relevant

[d3v53c]

Facing this issue, when font family is changed for InputLabelProps. Font family change is updated in the label, but legend width is not correctly updating.

[hmassareli]

Hey, I found a solution that works fine!!
For me, the best and most reliable way is changing the styles of the tag "legend" that is inside the input, and doing this along with any other changes you do in the label.
In my case, I needed to style the font size of the tag, so I put a another style changing the font-size of the legend to the same size.
and that worked fine, it seems the blank space behind the label is defined by the properties contained this tag "legend"

[ausrussell]

Hey, I found a solution that works fine!! For me, the best and most reliable way is changing the styles of the tag "legend" that is inside the input, and doing this along with any other changes you do in the label. In my case, I needed to style the font size of the tag, so I put a another style changing the font-size of the legend to the same size. and that worked fine, it seems the blank space behind the label is defined by the properties contained this tag "legend"

Spent longer than I thought I would on this and this was the solution for me, thanks. Given there's no class on the legend wasn't sure how to add a rule in the theme so went and added this to css file:

.MuiOutlinedInput-notchedOutline legend {
  font-family: "Raleway";
  font-size: 14px;
}

[ayoub-root]

use input like this example

<Select 
...
label={title}
  input={<OutlinedInput label={title} />} 
...