setInputValue blurs the input field inside a FieldArray

[johann-su]

Bug report

I am using formik with downshift. I have it set up so that once something gets entered in the input field, inside the downshift onInputValueChange method I set the formik field value using setFieldValue(name, inputValue). The value of the input field is controlled by the formik state as well (inputValue: formikContext.values.array[0].name).

Current Behavior

The input field gets blurred when typing. This only happens inside a FieldArray however.

Expected behavior

The input should stay focused while typing.

Cause

Every time a value is entered in the input field react re renders the page and therefore the field is deselected afterwards. Is this a known issue?

Your environment

Software	Version(s)
Formik	2.2.8
React	17.0.2
TypeScript	4.2.4
Browser	Chrome
npm/Yarn	npm
Operating System	macOS Mojave 11.4

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 60 days

[johnrom]

@johann-su can you provide a sandbox reproduction?

It looks like something in your form is causing a complete re-render of your inputs. Like missing a key prop within an array map function.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 60 days