Material-ui: TextField's outline doesn't resize when `label` prop changes

[liangchunn]

The border of a TextField with variant="outlined" does not update when new label props are being passed into the component.

• [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 outlined TextField component should resize its borders properly when a new label is passed in

Current Behavior 😯

The outlined TextField component doesn't resize its borders when a new label is passed in.

I suspect that the label is somehow calculating the label width of the previous ref, therefore it doesn't change.

I've tried some suggestions such as forcing a new key prop when the label should change, but it defocuses the input and is not very user-friendly.

Furthermore, I've tried setting a background on InputLabelProps; it works, but it doesn't suit my needs.

Steps to Reproduce 🕹

Link: https://codesandbox.io/s/pp6yk84wwx

1. Type 'a'
2. Type 'aa'
3. Type 'aaa', and the label should change to 'Invalid Tag', but the border doesn't change
4. Type 'aaaa', now the border changes to the correct width of the label 'Invalid Tag'
5. Delete two a's, and the label should change to 'Tag', but the border doesn't change
6. Delete one more 'a', and the border shrinks to the width of 'Tag'

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | v3.9.2 |
| React | v16.8.4 |
| Browser | Chrome |
| TypeScript | v3.3.3333 |

[oliviertassinari]

@liangchunn One workaround is to change the key on the text field when the label width change.

[liangchunn]

@oliviertassinari I've tried that, but changing the key defocuses the input, which isn't a good UX behaviour

[eps1lon]

@oliviertassinari I've tried that, but changing the key defocuses the input, which isn't a good UX behaviour

There is no perfect answer to when we should recalculate the size of outline. A good heuristic is probably when the label changes. I didn't implement this because I wanted to see the use case first. I suspected this would get abused.

I don't think it's a good idea to change the label for an input. Those are important for accessibility. The integration examples with form libraries usually use helper text for error hints. We should be consistent with that too (good usage, bad usage).

A better implementation of your use case would be

<TextField
  error={error}
  label="Tag"
  variant="outlined"
  value={value}
  onChange={onChange}
  helperText={error ? "Invalid Tag" : ""}
/>

[liangchunn]

@eps1lon Thanks for the suggestion, using helperText is actually more sensible in this case.