Home > Back-end >  MUI Input doesn't allow oninput attribute
MUI Input doesn't allow oninput attribute

Time:10-24

I have an MUI Input component defined like this where the oninput (tried as onInput as well) attribute doesn't get picked by MUI

  <Input
    variant="standard"
    size="small"
    type="number"
    inputProps={{
      min: '0',
      oninput: "validity.valid||(value='');",
    }}
    onChange="validity.valid||(value='');"
  />

As the MUI doc says,

inputProps object {} Attributes applied to the input element.

And well, oninput is a valid Event attribute for the input element but on render, the underlying native HTML input element has only the min attribute defined and the oninput attribute is missing.

What is going wrong here? I even tried it with onChange but to no success.

CodePudding user response:

You should pass a function parameter as onInput prop instead of a string like this:

const handleOnInput = (e) => {
    //e.target.value
};

<Input
    value={val}
    variant="standard"
    size="small"
    type="number"
    inputProps={{
      min: "0",
      onInput: handleOnInput
    }}
/>

You can take a look at this sandbox for live working example.

  • Related