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

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

[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>
  )}
 />

[jafri]

Issue still exists with using a HOC