0

I have a <TextField> component from Material UI that's supposed to allow a user to choose a numerical value. The field is for use on a medical product so we cannot have a default value that's displayed; rather, the value is initially an empty string and onInput we update it accordingly. The min/max props don't work as needed when passed to InputProps, so we manually check if the value passed is less than or equal to zero ('-' also evaluates to true here), and if so we reset the value to 1. However, when I try to instead reset the value to an empty string (i.e. clear the input), the actual state value changes, but the text displayed in the TextField component remains the same for some reason. If anyone knows why the text displayed is not clearing and what I could do to fix this, please let me know!

Code below:

<TextField
    disabled={!!requirement.id}
    type="number"
    value={requirement.val}
    variant="outlined"
    InputProps={{ inputProps: { min: 1, max: 1000000 } }}
    placeholder={'Title!'}
    onInput={(e) =>
        handleRequirementChange(
        Number(e.target.value),
        index
       )}
/>

  const handleRequirementChange = (val, index) => {
    const requirement = [...requirement]
    if (val <= 0) val = 1
    requirement[index] = val
    setRequirement(requirement)
  }
Eric Hasegawa
  • 169
  • 1
  • 14
  • 1
    Questions: 1) Is it normal for `InputProps` to have an `inputProps` property? It's been a while since I've used MUI, but this strikes me as odd and I can't help wondering if that's why your min/max props don't work. 2) What is `nw`? 3) Is `requirement` an array or an object? You seem to treat it as both. – ray Jan 23 '23 at 21:55
  • If by reset you mean to set a null value, TextField does not allow it. you can use like this for TextField value. value={value || ""} – Mahir Altınkaya Jan 23 '23 at 22:08
  • Where does the `nw` come from in your arrow function? That's what you `setRequirement` to. Is it an object with a .val property? – Brenton Haerr Jan 23 '23 at 23:16
  • @ray 1) Good question - see [here](https://stackoverflow.com/questions/47798104/set-min-max-on-textfield-type-number) for the logic there, 2) that's a typo! 3) `requirement` is an object, the edit should help clear that up. @Brenton `nw` was a typo sorry. @Mahir I want to set it to an empty string - the only problem is that the empty string is not being displayed in the actual ``. – Eric Hasegawa Jan 24 '23 at 23:16

0 Answers0