I'm trying to customize the onChange in formik input to convert the value that is string to number, however, the behavior is not changed, the console.log is also not shown on screen. I believe it is not overwriting Formik's default behavior. What am I doing wrong?
Control Input
<App.FormField name={'monthly_salary'}>
{({field, form}) => (
<C.InputGroup>
<C.InputLeftAddon bg={'primary.100'}>
{'R$'}
</C.InputLeftAddon>
<Custom.Input
variant={'secondary'}
placeholder={t('form.placeholder_value_zero')}
mask={'currency'}
handleChange={(e) => {
console.log(parseValue(e.currentTarget.value))
form.setFieldValue(
field.name,
parseValue(e.currentTarget.value)
)
}}
{...field}
/>
</C.InputGroup>
)}
</App.FormField>
My Custom Component Input
export const Input = ({mask, handleChange, ...props}: InputProps) => {
const handleInput = useCallback(
(e: React.FormEvent<HTMLInputElement>) => {
if (mask === 'currency') {
currency(e)
}
},
[mask]
)
return (
<C.Input
inputMode={'numeric'}
onInput={handleInput}
onChange={handleChange}
{...props}
/>
)
}
You can try something like that:
const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
let newEvent = event;
newEvent.target.value = "asd";
return field.onChange(newEvent);
};
I cannot reproduce your code to test it, but I suggest you try this
onChange={(e) => {
handleChange(e);
console.log(parseInt(e.currentTarget.value))
form.setFieldValue(
field.name,
parseInt(e.currentTarget.value)
)
}}
instead of
handleChange={(e) => {
console.log(parseValue(e.currentTarget.value))
form.setFieldValue(
field.name,
parseValue(e.currentTarget.value)
)
}}