<AnimatePresence> framer motion with useFieldArray - animating entry/exit of form components BUG SOLVED

[amirstepT]

I struggled with this bug for days so I wanted to post it here so others may find it helpful.

Goal: I have a dynamic form where user can add or delete new entries. I use useFieldArray to achieve this, giving the user the ability to add or delete fields. Mounting and dismounting of new components as they enter and exit the DOM is abrupt. I wanted animation to improve the UX.

Plan: I had already used useFieldArray to enable this functionality and it worked fine, but wanted to add animation. I would append/remove as per the docs outline in great detail (BTW, thanks to the devs who provided this great functionality). I have used framer motion in the past. The library has a special component, , which allows entering and exiting DOM elements to be animated in and out. React does not have native methods that allow components to be animated in and out as they enter the DOM, so this functionality is very helpful to improve UX. It has to be used with a <motion.div> component where the animation directions are fed as props.

Psuedo-code:

<AnimatePresence>
   {fields.map(item, index) => (
      <motion.div key={item.id} {...animationProps}>
         <Controller name="anyname" control={control} 
            render={({
                field,
                fieldState: { invalid, error },
              }) => (<formfields {...field} />)}
         />
         <button onClick={() => remove(index)}>Delete</button> //  for removal of above form fields
      </motion.div>
   )}
</AnimatePresence>

Bug: When the button is clicked to remove an item, there is an issue where AnimatePresence gets in the way of the last item in the useArrayField from unregistering properly. The fields array gets updated properly (so one less element), but unregistering is incomplete (can see this in the devtools). This only affects the LAST element in the array, and it only affects those elements that expose and read the fieldState (e.g. invalid or error). Needless to say, this was extremely frustrating to figure out and debug, given so many gotchas in terms of when this actually happens. The typical behavior is that items previously deleted "creep" back into the DOM almost at will.

SOLVED: in the motion.div element, add an event listener: onAnimationComplete. It takes a definition so you can use logic in the handler to make sure it's an exit animation, and you can bind the index. If it's the last item (so if index === fields.length - 1), then execute remove(index) again. Basically, need to wait until the animation is over. Removing the item again did not cause any bugs but solved the one outlined. Good luck.

[mbonaker]

Thanks for documenting this! 😌 I had the same issue and this workaround fixed it but I hate it 😭

I would still very much like to see this work out-of-the-box.

[EvgenyMasanin]

Thank you so much for this post. I really don't know how I could solve this problem myself.

[hungngodev]

You have saved my day

[sasa-djuric]

Here is my implementation based on @amirstepT solution.

<AnimatePresence>
  {fields.map((field, index) => (
    <motion.div
      key={field.id}
      layout="position"
      layoutId={field.id}
      initial={{
        opacity: 0
      }}
      animate={{
        opacity: 1
      }}
      exit={{
        id: 'exit-animation',
        opacity: 0
      }}
      onAnimationComplete={(definition) => {
        if (
          index === fields.length - 1 &&
          typeof definition === 'object' &&
          definition !== null &&
          'id' in definition &&
          definition.id === 'exit-animation'
        ) {
          remove(index);
        }
      }}
    ></motion.div>
  ))}
</AnimatePresence>

[gomiseki]

Use 'setValue;. It's better for your mental health

[razorman8669]

@gomiseki can you elaborate what you mean by using setValue? I assume you mean in place of remove(index)?

[gomiseki]

I encountered the same issue as the reporter. I first implemented the code to render the list of inputs using useFieldArray, and later, when I added 'motion' for interactions, I found that the remove method and exit animation didn't work correctly.

After debugging, I discovered that the problem was caused by the automatically generated keys from useFieldArray not aligning with the keys used in motion.div as intended. To resolve this, I simply removed useFieldArray and manually set the keys using setValue.

I didn't consider the reporter's solution because it requires a deep understanding of motion. 😢

Here’s my code. I hope these few lines explain it well. Good luck!

const initData = () => ({
  myProps: undefined,
  key: nanoid(8),
});

const push = () => {
  setValue(`list.${fields.length}`, { ...initData() });
}

const remove =(index:number) => {
  setValue("list", fields.filter((_, i) => i !== index));  // remove
  clearErrors(); // need in my case
}

[saltnpixels]

im having this bug no matter what i do :(