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.