Formik: Arrays of objects cause multiple re-renders and lose focus on change.

[flanamacca]

Bug

handleChange is losing focus on an array nested item where if the array is an array of objects, it loses focus on the first handleChange called.

Current Behavior

When any field in a nested array is updating (only noticed this when using text inputs vs select boxs) the focus is completely lost as the component fully re-renders anew.

Desired Behavior

Component should maintain focus

Additional Information

Having debugged to replace it with my own handler for handleChange, can confirm is it the use of setFieldValue that is where the component loses focus and control. This makes me think its the re-rendering that makes this break.

<Field name={friends.${index}.field} handleChange={handleChange} handleBlur={handleBlur} />

Focus is only removed by a command that affects the value.

• Formik Version: 0.11.11
• React Version: 16.2
• TypeScript Version: N/A
• CodeSandbox Link:
• OS: osX
• Node Version: v8.4.0
• Package Manager and Version: 1.4

[pgrekovich]

I have same issue.
I try use FastField in the FieldArray, but i get Warning: performUpdateIfNecessary: Unexpected batch number

[ibiBgOR]

I made a codesandbox sample for this issue. https://codesandbox.io/s/jvxpr5jq55

[jaredpalmer]

I don't understand the bug repro in the sandbox. What actions should I take to reproduce?

[ibiBgOR]

The codesandbox was some demo I made for me. But with this code I could reproduce, that after changing one of the values in the tuples I lose focus. I didn't want to make changes so that the problem wouldn't reproduce.
But I guess I need to rework the sample, so that it easier to understand.

[ibiBgOR]

Ok I edited the codesandbox. I got a minimal sample. Problem detected (for my usecase):
When using a function that generates a HOC, then the focus will be lost.
When using a normal HOC, then the focus will be lost too.
When using no HOC everything is fine.

Maybe @flanamacca or @pgrekovich could check their code. Or post a snipped.

[flanamacca]

@jaredpalmer if you look at @ibiBgOR example you will see that the issue is the HOC.

I had the same as @ibiBgOR - if i leverage the HOC for pushing values, i lose focus. If i just generate it flat, no issues at all

[jhalvorson]

I came across a similar issue, isn't this happening because the HOC is creating a new component and is then re-rendering on any updates (i.e typing in the field)? As soon as you use a stateless component all works fine, probably wrong but isn't this a React _issue_ rather than a Formik one?

[nmartinezb3]

This is happening to me without any HOC. Somebody has a workaround?

Edit: After investigating for a while, I realized that what was making me loose focus after typing was the wrong key on the parent component of the map inside the array field. Make sure always setting the same key value to the same node.

<FieldArray 
  name={`resources.${index}.linkList`}
  render={arrayHelpers => (
    {values.linkList.map(link => (
       <div key={link.key}>....</div>
     )}
    <button onClick={() => arrayHelpers.push({ key: Math.random(), link: '' })} >
      Add link
    </button>
  )}
 />

[stale[bot]]

Hola! So here's the deal, between open source and my day job and life and what not, I have a lot to manage, so I use a GitHub bot to automate a few things here and there. This particular GitHub bot is going to mark this as stale because it has not had recent activity for a while. It will be closed if no further activity occurs in a few days. Do not take this personally--seriously--this is a completely automated action. If this is a mistake, just make a comment, DM me, send a carrier pidgeon, or a smoke signal.

[stale[bot]]

ProBot automatically closed this due to inactivity. Holler if this is a mistake, and we'll re-open it.

[jafri]

Issue still exists with using a HOC