Skip to content

fix: prevent duplicate MutationObserver when autoAnimate called twice#234

Open
kaigritun wants to merge 1 commit intoformkit:masterfrom
kaigritun:fix/duplicate-mutation-observer
Open

fix: prevent duplicate MutationObserver when autoAnimate called twice#234
kaigritun wants to merge 1 commit intoformkit:masterfrom
kaigritun:fix/duplicate-mutation-observer

Conversation

@kaigritun
Copy link

Problem

When autoAnimate() is called multiple times on the same element (which happens in React StrictMode as components render twice), a new MutationObserver was being created each time. This caused child-added animations to fail because multiple observers were interfering with each other.

Solution

Check if a MutationObserver already exists for the element before creating a new one. This ensures idempotent behavior when autoAnimate() is called repeatedly on the same element.

Changes

-      const mo = new MutationObserver(handleMutations)
-      mo.observe(el, { childList: true })
-      mutationObservers.set(el, mo)
+      if (!mutationObservers.has(el)) {
+        const mo = new MutationObserver(handleMutations)
+        mo.observe(el, { childList: true })
+        mutationObservers.set(el, mo)
+      }

This fix was validated by the issue reporter in #232 who confirmed it resolves the problem.

Fixes #232

When autoAnimate() is called multiple times on the same element (e.g., in
React StrictMode which renders components twice), a new MutationObserver
was being created each time. This caused child-added animations to fail
because multiple observers were interfering with each other.

Now we check if a MutationObserver already exists for the element before
creating a new one. This ensures idempotent behavior when autoAnimate()
is called repeatedly on the same element.

Fixes formkit#232
@vercel
Copy link

vercel bot commented Feb 10, 2026

Someone is attempting to deploy a commit to the Formkit Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Child added animation is not working in react StrictMode (or in any other case where autoAnimate() is called twice)

1 participant