Here is a nice minimum reproducible example for my problem:
import React from 'react';
import { render } from 'react-dom';
import { Formik, Form, Field } from 'formik';
const App = () => {
const [imgSrc, setImgSrc] = React.useState('');
return <>
<Formik
initialValues={{
'imgSrc': '',
}}
>
<Form>
<img src={imgSrc} alt="whatever you typed in" />
<Field
name="imgSrc"
onChange={e => setImgSrc(e.target.value)}
/>
</Form>
</Formik>
</>;
}
render(<App />, document.getElementById('root'));
Whenever I update imgSrc
(the field with that name
attribute) then Formik seems to reset and blur the input… This is very annoying!
How can I get Formik to stop doing this?
I’ve also provided a nice codesandbox.