s-yadav / react-number-format

React component to format numbers in an input or as a text.
MIT License
3.9k stars 410 forks source link

Event type difference in onValueChange because of SyntheticEvent #805

Open gkopowski opened 1 year ago

gkopowski commented 1 year ago

Hi, I would like to pass a whole change event to the onChange callback when using the onValueChange prop like this:

onValueChange={({ value }, sourceInfo) => {
    onChange({
         ...sourceInfo.event,
         target: {
             ...sourceInfo.event.target,
             name: rest.name,
             value,
         },
    });
}}

but there is a difference between event that is available in sourceInfo object and the event that onChange function accepts. My onChange function comes from Material UI input and takes ChangeEvent<HTMLInputElement>, but the sourceInfo.event type is SyntheticEvent<HTMLInputElement, Event>. Because of that there is a problem with using stopPropagation() and preventDefault() functions, because they don't exist in the SyntheticEvent. For example I can't do something like this

<MyInput
    ...
    onChange={(event) => {
        event.preventDefault(); // error
        // some logic
    }}
    />

I belive this issue can happen in many different cases, not only when integrating NumericFormat component with MUI. Is there anything I can do with that?