MUI TextField not accepting pattern

user_1754790 0
Viewed 217

I want to make Material UI TextField to only accept number values, in the MUI documentation the solution is as following:

<TextField inputProps={{ inputMode: 'numeric', pattern: '[0-9]*' }} />

However this is for the version 5 of MUI, and in my case I'm using the version 4, so I tried as following:

<TextField
      InputProps={{
        inputProps: {
          inputMode: "numeric",
          pattern: "[0-9]*"
        }
      }}
    />

But for some reason, this is not working, and I can still type values other than numbers in the input.

Using input="number" is not an option, as I don't want to keep the 0 when the input is empty, neither I want the stepper to be visible.

Full example is in this sandbox: https://codesandbox.io/s/mui4-forked-0j98er?file=/src/App.js:136-408

How can I solve this ?

material-ui reactjs arrays
2 Answers

You can use controlled input and clean value from non-numeric characters

export default function MyComponent() {
  const [inputValue, setInputValue] = useState("");

  function onChange(e) {
    setInputValue(e.target.value.replace(/\D/g, ""));
  }

  return (
    <TextField
      label="number input"
      variant="outlined"
      color="secondary"
      fullWidth
      value={inputValue}
      onChange={onChange}
      inputProps={{
        maxLength: 5
      }}

    />
  );
}

I was inspired by @Dmitriif's answer because it uses less code. But I tweaked it a bit. live demo However, the min: 0 doesn't work

export default function IconButtons() {
  return (
    <TextField
      label="number input"
      variant="outlined"
      color="secondary"
      fullWidth
      inputProps={{
        type: "text",
        inputMode: "numeric",
        pattern: "d*",
        min: 0,
        maxLength: 5
      }}
    />
  );
}
user_118147940

TextField in mui v4 also has inputProps property which can help you to apply desired attributes to the input element. However, you will need to set another property type="number" to make the component work correctly in your case:

    <TextField
      label="number input"
      variant="outlined"
      color="secondary"
      fullWidth
      type="number"
      inputProps={{
        min: 0,
        maxLength: 5,
        inputMode: "numeric",
        pattern: "[0-9]*"
      }}
    />

Demo

user_141906900
Related