Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-08 02:52:39 -05:00
Code Issues Activity

Fixed page jump on modal close in Safari (#18624)

Browse source 
refs https://github.com/TryGhost/Product/issues/4018

---

### <samp>🤖 Generated by Copilot at 5c51ade</samp>

Fix modal scrolling bug in Safari by blurring active element and
delaying close. Affect `Modal.tsx` component.
This commit is contained in:
Jono M 2023-10-16 09:53:49 +01:00 • committed by GitHub
parent 39848883df
commit c2f3721e41
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
apps/admin-x-settings/src/admin-x-ds/global/modal/Modal.tsx
View file

@ -89,14 +89,22 @@ const Modal: React.FC<ModalProps> = ({
useEffect(() => {
const handleEscapeKey = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
if (onCancel) {
onCancel();
} else {
confirmIfDirty(dirty, () => {
modal.remove();
afterClose?.();
});
// Fix for Safari - if an element in the modal is focused, closing it will jump to
// the bottom of the page because Safari tries to focus the "next" element in the DOM
if (document.activeElement && document.activeElement instanceof HTMLElement) {
document.activeElement.blur();
}
// Close the modal on the next tick so that the blur registers
setTimeout(() => {
if (onCancel) {
onCancel();
} else {
confirmIfDirty(dirty, () => {
modal.remove();
afterClose?.();
});
}
});
}
};