Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
Code Issues Activity

🐛 Fixed popups not closing correctly

Browse source 
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
This commit is contained in:
Simon Backx 2022-08-15 10:22:26 +02:00
parent bf698c9a75
commit 2b83af85d1
3 changed files with 26 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
apps/comments-ui/package.json
View file

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

21
apps/comments-ui/src/components/PopupModal.js
View file

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

8
apps/comments-ui/yarn.lock
View file

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