@snapdragonsnursery/react-components 1.18.1 → 1.18.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snapdragonsnursery/react-components",
-  "version": "1.18.1",
+  "version": "1.18.2",
   "description": "",
   "main": "src/index.js",
   "scripts": {

package/src/AuthButtons.jsx

@@ -203,23 +203,44 @@ function AuthButtons({ theme, setTheme, authState, setAuthState }) {
   // Setup Popper when menu is open
   useEffect(() => {
     if (menuOpen && buttonRef.current && menuRef.current) {
-      popperInstance.current = createPopper(
-        buttonRef.current,
-        menuRef.current,
-        {
-          placement: "bottom-end",
-          modifiers: [
-            { name: "preventOverflow", options: { boundary: "viewport" } },
+      // Add a small delay to ensure DOM nodes are fully mounted
+      // This prevents MutationObserver errors when Popper tries to observe nodes
+      const timeoutId = setTimeout(() => {
+        // Double-check refs are still valid before creating Popper
+        if (
+          buttonRef.current &&
+          menuRef.current &&
+          buttonRef.current instanceof Node &&
+          menuRef.current instanceof Node
+        ) {
+          popperInstance.current = createPopper(
+            buttonRef.current,
+            menuRef.current,
             {
-              name: "flip",
-              options: {
-                fallbackPlacements: ["bottom-start", "top-end", "top-start"],
-              },
-            },
-          ],
+              placement: "bottom-end",
+              modifiers: [
+                { name: "preventOverflow", options: { boundary: "viewport" } },
+                {
+                  name: "flip",
+                  options: {
+                    fallbackPlacements: ["bottom-start", "top-end", "top-start"],
+                  },
+                },
+              ],
+            }
+          );
+        }
+      }, 0);
+
+      return () => {
+        clearTimeout(timeoutId);
+        if (popperInstance.current) {
+          popperInstance.current.destroy();
+          popperInstance.current = null;
         }
-      );
+      };
     }
+
     return () => {
       if (popperInstance.current) {
         popperInstance.current.destroy();