Form Input looses focus upon values validity change

[ThinhNguyenHoang]

Hello, For some reason the form input loses focus when the field validity change (from Invalid to invalid and vice versa) . I don't know if this is the default behavior but it feels annoying as a user (require additional mouse click to re-enter the form) .

Code: `import { Button, Space } from 'antd'; import React from 'react'; import * as Yup from 'yup' import { Formik } from 'formik'; import { Form, FormItem, Input} from 'formik-antd';

const validationSchema = Yup.object({ test: Yup.string().required("required") }) const TestPage = () => ( <> <Formik onSubmit={(val) => console.log("values", val)} initialValues={{ test: "" }} validationSchema={validationSchema}> {({ values }) => { return <Form> <FormItem label="TEST NAME" name="test"> <Input name="test" /> </FormItem> </Form> }} </Formik> </>

); export default TestPage;`

Expected Result: The user can continue to input even when the field validity change

[elghst]

Sup! Check your chrome console for a warning that starts like this: Warning: [antd: Input] When Input is focused, dynamic add or remove prefix / suffix will make it lose focus caused by dom structure change... If so, the link in the message basically tells you to set default prefix/suffix (the element antd uses to render input validation) to your Input. I just left it blank, the problem is gone : <Input name="password" placeholder="Password" suffix />

[andrii-muntian-p24]

Hello! Have similar issue here, but do not see any warning message like mentioned above by @elghst. I think i might find reason for that. It is reproducible on latest for today [email protected] version but not reproduced on 4.1.0 which is set as dependency here in formik-antd codesandbox example. It seems input is rerendered when validation error is displayed/hided. Here is issue reproduced example on codesandbox.

How to reproduce:

• focus to inout
• click outside of input and see validation error.
• focus to input again
• type smth
• see validation error is gone and input is unfocused

How to fix:

• still looking for solution

[lscheibel]

@andrii-muntian-p24 This is an issue with antd but in your case adding hasFeedback={false} to the FormItem or adding showCount to the TextArea should fix the issue.