From fd1f4d311af36984897d8842cc66ee2d3681f8ae Mon Sep 17 00:00:00 2001
From: Paul Aderoju <paul.adeboye@yahoo.com>
Date: Tue, 15 Sep 2026 22:06:34 +0100
Subject: [PATCH] fix: prevent duplicate iframes on CldUploadWidget
 unmount/remount

When CldUploadWidget unmounts and remounts, next/script's onLoad fires
again. The triggerOnIdle callback had no guard against the component
unmounting before the idle callback fired, allowing a zombie widget to
be created with an orphaned iframe.

Add an isMounted ref that gates both handleOnLoad and the idle callback.
Set isMounted=true on mount; false + destroy on cleanup, in that order.

Closes #587. Supersedes #588.
---
 .../CldUploadWidget/CldUploadWidget.tsx       |  7 ++-
 .../tests/nextjs-app/app/test-widget/page.tsx | 55 +++++++++++++++++++
 2 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 next-cloudinary/tests/nextjs-app/app/test-widget/page.tsx

diff --git a/next-cloudinary/src/components/CldUploadWidget/CldUploadWidget.tsx b/next-cloudinary/src/components/CldUploadWidget/CldUploadWidget.tsx
index 9e5f55a7..58b86ed7 100644
--- a/next-cloudinary/src/components/CldUploadWidget/CldUploadWidget.tsx
+++ b/next-cloudinary/src/components/CldUploadWidget/CldUploadWidget.tsx
@@ -50,6 +50,7 @@ const CldUploadWidget = ({
   const uploadWidgetId = useUploadWidgetId();
   const cloudinary: CldUploadWidgetCloudinaryInstance = useRef();
   const widget: CldUploadWidgetWidgetInstance = useRef();
+  const isMounted = useRef(false);
 
   const [error, setError] = useState<CloudinaryUploadWidgetError | undefined>(undefined);
   const [results, setResults] = useState<CloudinaryUploadWidgetResults | undefined>(undefined);
@@ -130,6 +131,8 @@ const CldUploadWidget = ({
    */
 
   function handleOnLoad() {
+    if ( !isMounted.current ) return;
+
     setIsScriptLoading(false);
 
     if ( !cloudinary.current ) {
@@ -140,14 +143,16 @@ const CldUploadWidget = ({
     // to trigger widget creation. Optional.
 
     triggerOnIdle(() => {
-      if ( !widget.current ) {
+      if ( isMounted.current && !widget.current ) {
         widget.current = createWidget();
       }
     });
   }
 
   useEffect(() => {
+    isMounted.current = true;
     return () => {
+      isMounted.current = false;
       widget.current?.destroy();
       widget.current = undefined;
     }
diff --git a/next-cloudinary/tests/nextjs-app/app/test-widget/page.tsx b/next-cloudinary/tests/nextjs-app/app/test-widget/page.tsx
new file mode 100644
index 00000000..6d34636b
--- /dev/null
+++ b/next-cloudinary/tests/nextjs-app/app/test-widget/page.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import { useState } from 'react';
+import { CldUploadWidget } from '../../../../';
+
+export default function TestWidget() {
+  const [mounted, setMounted] = useState(true);
+  const [mountCount, setMountCount] = useState(1);
+
+  function toggle() {
+    setMounted(false);
+    setTimeout(() => {
+      setMounted(true);
+      setMountCount((c) => c + 1);
+    }, 300);
+  }
+
+  return (
+    <div style={{ padding: '2em', fontFamily: 'sans-serif' }}>
+      <h1>CldUploadWidget — unmount/remount test</h1>
+      <p>
+        Click <strong>Remount widget</strong> to unmount and remount the widget.
+        After each remount, open the browser DevTools → Elements panel and check
+        that there is only <strong>one</strong> Cloudinary Upload Widget iframe
+        in the DOM (look for <code>id</code> starting with <code>cloudinary-widget</code>).
+      </p>
+      <p>Mount count: <strong>{mountCount}</strong></p>
+
+      <div style={{ marginBottom: '1em' }}>
+        <button onClick={toggle} style={{ marginRight: '1em' }}>
+          Remount widget
+        </button>
+      </div>
+
+      {mounted && (
+        <CldUploadWidget uploadPreset="next-cloudinary-unsigned">
+          {({ open }) => (
+            <button onClick={() => open()}>
+              Open Upload Widget
+            </button>
+          )}
+        </CldUploadWidget>
+      )}
+
+      <hr style={{ margin: '2em 0' }} />
+      <h2>How to verify</h2>
+      <ol>
+        <li>Open DevTools → Elements (or Inspector)</li>
+        <li>Search for <code>cloudinary-widget</code> in the DOM</li>
+        <li>Click <strong>Remount widget</strong> several times</li>
+        <li>Confirm there is always exactly one iframe — not one per remount</li>
+      </ol>
+    </div>
+  );
+}