How do I make Mui textfield type number only accept number ? Currently it accept numbers,"e" and dashes?

Question

This is my current code.

 <TextField error={values[1].error} fullWidth id="id" type="number" value={values[1].Id} placeholder='Enter ID' onChange={handleChange(1,'Id')} variant="outlined" inputProps={{min: 0,inputMode: 'numeric', pattern: '[0-9]'}} onBlur={() => handleOnBlurEvent(1,'Id')} />

Answer 1

As mentioned by jonrsharpe , numbers containing - or e are still valid numbers.

If you still want to limit the changes that are being accepted, you can make use of a custom handleNumberChange function that filters chars such as e , E and - .

const handleNumberChange = (id: number, key: string, value: string) => {
  if (["e", "E", "-"].some((char) => value.includes(char))) return;

  // handle change here
};

You would use it like that in your MUI <TextField/> :

<TextField
  ...
  onChange={(e) => handleNumberChange(1, "Id", e.target.value)}
/>