Replies: 2 comments
-
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. |
Beta Was this translation helpful? Give feedback.
0 replies
-
Thank you so much for this post. I really don't know how I could solve this problem myself. |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
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:
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.
Beta Was this translation helpful? Give feedback.
All reactions