🐛 Fixed popups not closing correctly

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

@@ -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",

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>
+        </>
     );
 }

apps/comments-ui/yarn.lock

@@ -1165,10 +1165,10 @@
   dependencies:
     "@hapi/hoek" "^8.3.0"
 
-"@headlessui/react@1.6.5":
+"@headlessui/react@^1.6.6":
-  version "1.6.5"
+  version "1.6.6"
-  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.6.5.tgz#5587c537de809cf3146eb2ff263e5e940b1bf69c"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.6.6.tgz#3073c066b85535c9d28783da0a4d9288b5354d0c"
-  integrity sha512-3VkKteDxlxf3fE0KbfO9t60KC1lM7YNpZggLpwzVNg1J/zwL+h+4N7MBlFDVpInZI3rKlZGpNx0PWsG/9c2vQg==
+  integrity sha512-MFJtmj9Xh/hhBMhLccGbBoSk+sk61BlP6sJe4uQcVMtXZhCgGqd2GyIQzzmsdPdTEWGSF434CBi8mnhR6um46Q==
 
 "@humanwhocodes/config-array@^0.5.0":
   version "0.5.0"