Material-ui: Text Field type number not clearing input when value is set to ""

[Shooshte]

I have a Text Field set to type number:

<TextField
          floatingLabelText="Magicka Cost:"
          type="number"
          id="magicka"
          name="magicka"
          value={magicka}
          onChange={this.updateField}
          errorText={magicka === "" && "Field is required"}
        />

The value of the field is "" on first load, and then I am using this function to update the state:

updateField = event => {
    const { name, value } = event.target;
    this.setState({
      [name]: value
    });
  };

What happens is that when I set the value of the text Field with another function back to "" the input still displays the value set previously, while the input field label resets.

Here is a screenshot of the issue.

Let me know if more information is needed.

[oliviertassinari]

Are you able to reproduce the bahavior with a native <input />? My best guess is that it's related to React. It would be even better to have a reproduction example with codesandbox or webpackbin. Are you able to reproduce the behavior with the v1-beta branch?

[kajm]

@oliviertassinari I am facing the same issue, and I can confirm that there is a difference between the input - and the TextField component. The input component will not display the latest value after "reset" but the textfield does.

Right now I am using material-ui V1 Beta 8 with React version 15.6.1.

[oliviertassinari]

@kajm Could you open an issue with a reproduction example? codesandbox.io is a good tool to do so. Thanks

[kajm]

@oliviertassinari Sure! Whenever I get the time to do it I will, hopefully this weekend :)

[nperichSYKES]

I get this bug (only) when multiline is true (for both Input and TextField, using controlled component with setState). The react state is '', but the Input still renders the previous state.

When its not a multiline, there's no issue.

Sorry no time to create a demo right now! But that clue might help. :)

[alilland]

Having this same issue

[RBdevelop]

my solution
```
updateField() {
// your save logic

const textFieldinput = document.getElementById('magicka');
(textFieldinput != null) ? (textFieldinput.value = '') : null
}

So the value of the input will clear after your save logic

[Arthur-Serafim]

Hi! I was having the same issue, but i made it work. This was my solution:

this.setState({ content: null }) // Note: switch content by the variable you wanna reset event.target.value = null

[karunkamal]

TextField is wrapper to Input and bug is in <Input type=number /> having similar issue.

[jgoodrow]

null isn't clearing the field for me. I'm using functional components with state hooks, but I can't see that making a difference in this instance. Anybody else having this issue?

EDIT: turns out it was a me issue, as these usually are. Immutability strikes again.

if(parseInt(qty) || qty === '0')

  qty = +qty;

setLineQty((oldLineQty)=> oldLineQty.set(line.componentid, qty));

Here's the offending line, in case anybody would like to point and laugh

[adisher]

I am using useRef hook in functional component.

let text = useRef(null);
<TextField variant="outlined" margin="normal" required fullWidth inputRef={text} name="description" label="Description" type="text" id="text" value={description || ''} onChange={(e) => setDescription(e.target.value)} autoComplete="description" />

It still doesn't work! Also, I have set my hook to null

[grantzvolsky]

This is a confusing feature of react, see https://github.com/facebook/react/issues/11417. A forced re-render using the key property is one possible fix; another, cleaner fix is to avoid null input values.

Example: https://codesandbox.io/s/material-ui-playground-71xej?file=/app.jsx