From 2b83af85d1c781c2ebd519c6044aa5a4051d2969 Mon Sep 17 00:00:00 2001
From: Simon Backx <simon@ghost.org>
Date: Mon, 15 Aug 2022 10:22:26 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fixed=20popups=20not=20closing?=
 =?UTF-8?q?=20correctly?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

refs https://ghost.slack.com/archives/C02G9E68C/p1660323308235919

- When opening and closing a popup very fast, it will stay in DOM, blocking all pointer events.
- The Headless UI component <Transition show={show}> is not removed from DOM when show is set to true, and false very fast
- Fixed this by forcing a popup to get removed from DOM after 250ms after is has been closed.
- Updated HeadlessUI version
- Moved testing packges to dev dependencies
---
 apps/comments-ui/package.json                 |  8 +++----
 apps/comments-ui/src/components/PopupModal.js | 21 ++++++++++++++++---
 apps/comments-ui/yarn.lock                    |  8 +++----
 3 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/apps/comments-ui/package.json b/apps/comments-ui/package.json
index 4320f71df4..3c2d026115 100644
--- a/apps/comments-ui/package.json
+++ b/apps/comments-ui/package.json
@@ -15,10 +15,8 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
+    "@headlessui/react": "^1.6.6",
     "@sentry/react": "^7.5.0",
-    "@testing-library/jest-dom": "5.16.2",
-    "@testing-library/react": "12.1.2",
-    "@testing-library/user-event": "^14.4.3",
     "@tiptap/core": "^2.0.0-beta.182",
     "@tiptap/extension-blockquote": "^2.0.0-beta.29",
     "@tiptap/extension-document": "^2.0.0-beta.17",
@@ -75,7 +73,9 @@
     ]
   },
   "devDependencies": {
-    "@headlessui/react": "1.6.5",
+    "@testing-library/jest-dom": "5.16.2",
+    "@testing-library/react": "12.1.2",
+    "@testing-library/user-event": "^14.4.3",
     "autoprefixer": "^10.4.7",
     "bson-objectid": "^2.0.3",
     "chalk": "4.1.2",
diff --git a/apps/comments-ui/src/components/PopupModal.js b/apps/comments-ui/src/components/PopupModal.js
index 8e7f371f59..20911bbfb1 100644
--- a/apps/comments-ui/src/components/PopupModal.js
+++ b/apps/comments-ui/src/components/PopupModal.js
@@ -14,6 +14,19 @@ export default function PopupModal(props) {
         if (popup !== null) {
             setLastPopup(popup);
         }
+
+        if (popup === null) {
+            // Remove lastPopup from memory after 250ms (leave transition has ended + 50ms safety margin)
+            // If, during those 250ms, the popup is reassigned, the timer will get cleared first.
+            // This fixes an issue in HeadlessUI where the <Transition show={show}> component is not removed from DOM when show is set to true and false very fast.
+            const timer = setTimeout(() => {
+                setLastPopup(null);
+            }, 250);
+
+            return () => {
+                clearTimeout(timer);
+            };
+        }
     }, [popup, setLastPopup]);
 
     if (!lastPopup || !lastPopup.type) {
@@ -32,8 +45,10 @@ export default function PopupModal(props) {
     const show = popup === lastPopup;
 
     return (
-        <GenericDialog show={show} callback={popupProps.callback}>
-            <PageComponent {...popupProps}/>
-        </GenericDialog>
+        <>
+            <GenericDialog show={show} callback={popupProps.callback}>
+                <PageComponent {...popupProps}/>
+            </GenericDialog>
+        </>
     );
 }
diff --git a/apps/comments-ui/yarn.lock b/apps/comments-ui/yarn.lock
index 09c5b7ce8c..5ae61d8ac0 100644
--- a/apps/comments-ui/yarn.lock
+++ b/apps/comments-ui/yarn.lock
@@ -1165,10 +1165,10 @@
   dependencies:
     "@hapi/hoek" "^8.3.0"
 
-"@headlessui/react@1.6.5":
-  version "1.6.5"
-  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.6.5.tgz#5587c537de809cf3146eb2ff263e5e940b1bf69c"
-  integrity sha512-3VkKteDxlxf3fE0KbfO9t60KC1lM7YNpZggLpwzVNg1J/zwL+h+4N7MBlFDVpInZI3rKlZGpNx0PWsG/9c2vQg==
+"@headlessui/react@^1.6.6":
+  version "1.6.6"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.6.6.tgz#3073c066b85535c9d28783da0a4d9288b5354d0c"
+  integrity sha512-MFJtmj9Xh/hhBMhLccGbBoSk+sk61BlP6sJe4uQcVMtXZhCgGqd2GyIQzzmsdPdTEWGSF434CBi8mnhR6um46Q==
 
 "@humanwhocodes/config-array@^0.5.0":
   version "0.5.0"