From abbb37142e45db252ae275043a16975e4075b8ba Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Thu, 27 Feb 2025 17:22:24 +0200 Subject: [PATCH 1/8] fix(clerk-js): Issue with modal overlay --- packages/clerk-js/src/ui/elements/Modal.tsx | 79 ++++++++++----------- 1 file changed, 39 insertions(+), 40 deletions(-) diff --git a/packages/clerk-js/src/ui/elements/Modal.tsx b/packages/clerk-js/src/ui/elements/Modal.tsx index f0524ab6740..3944d214f9f 100644 --- a/packages/clerk-js/src/ui/elements/Modal.tsx +++ b/packages/clerk-js/src/ui/elements/Modal.tsx @@ -47,53 +47,52 @@ export const Modal = withFloatingTree((props: ModalProps) => { context={context} isOpen={isOpen} > - - + + + ({ + animation: `${animations.fadeIn} 150ms ${t.transitionTiming.$common}`, + zIndex: t.zIndices.$modal, + backgroundColor: t.colors.$modalBackdrop, + alignItems: 'flex-start', + justifyContent: 'center', + overflow: 'auto', + width: '100vw', + height: ['100vh', '-webkit-fill-available'], + position: 'fixed', + left: 0, + top: 0, + }), + containerSx, + ]} + > ({ - animation: `${animations.fadeIn} 150ms ${t.transitionTiming.$common}`, - zIndex: t.zIndices.$modal, - backgroundColor: t.colors.$modalBackdrop, - alignItems: 'flex-start', - justifyContent: 'center', - overflow: 'auto', - width: '100vw', - height: ['100vh', '-webkit-fill-available'], - position: 'fixed', - left: 0, - top: 0, + position: 'relative', + outline: 0, + animation: `${animations.modalSlideAndFade} 180ms ${t.transitionTiming.$easeOut}`, + margin: `${t.space.$16} 0`, + [mqu.sm]: { + margin: `${t.space.$10} 0`, + }, }), - containerSx, + contentSx, ]} > - ({ - position: 'relative', - outline: 0, - animation: `${animations.modalSlideAndFade} 180ms ${t.transitionTiming.$easeOut}`, - margin: `${t.space.$16} 0`, - [mqu.sm]: { - margin: `${t.space.$10} 0`, - }, - }), - contentSx, - ]} - > - {props.children} - + {props.children} - - + + ); }); From 9bab3550b4187126268b439b639ebcb87b9dc8b6 Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Thu, 27 Feb 2025 17:29:08 +0200 Subject: [PATCH 2/8] Add changeset --- .changeset/mean-roses-dress.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/mean-roses-dress.md diff --git a/.changeset/mean-roses-dress.md b/.changeset/mean-roses-dress.md new file mode 100644 index 00000000000..67b04f2c86c --- /dev/null +++ b/.changeset/mean-roses-dress.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': patch +--- + +Fix an issue whith float overlay From a3a4b84269950553ce0a11d5567d0e1e991c9dd7 Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Thu, 27 Feb 2025 17:45:16 +0200 Subject: [PATCH 3/8] Update packages/clerk-js/src/ui/elements/Modal.tsx Co-authored-by: panteliselef --- packages/clerk-js/src/ui/elements/Modal.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/clerk-js/src/ui/elements/Modal.tsx b/packages/clerk-js/src/ui/elements/Modal.tsx index 3944d214f9f..5dfbd2c380d 100644 --- a/packages/clerk-js/src/ui/elements/Modal.tsx +++ b/packages/clerk-js/src/ui/elements/Modal.tsx @@ -47,6 +47,7 @@ export const Modal = withFloatingTree((props: ModalProps) => { context={context} isOpen={isOpen} > + {/*Avoid using children with FloatingOverlay */} Date: Thu, 27 Feb 2025 18:00:03 +0200 Subject: [PATCH 4/8] Update .changeset/mean-roses-dress.md Co-authored-by: panteliselef --- .changeset/mean-roses-dress.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/mean-roses-dress.md b/.changeset/mean-roses-dress.md index 67b04f2c86c..04d87ce4f5b 100644 --- a/.changeset/mean-roses-dress.md +++ b/.changeset/mean-roses-dress.md @@ -2,4 +2,4 @@ '@clerk/clerk-js': patch --- -Fix an issue whith float overlay +Bug fix: Using `` with children causes modals to get blocked on some sites on chromium browsers. From b9349577b76c77d74049244c037c711c07329c1b Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Thu, 27 Feb 2025 18:34:47 +0200 Subject: [PATCH 5/8] fix(clerk-js): Inline FloatingOverlay scroll locking functionality --- packages/clerk-js/src/ui/elements/Modal.tsx | 16 ++-- .../clerk-js/src/ui/hooks/useScrollLock.ts | 81 +++++++++++++++++++ 2 files changed, 92 insertions(+), 5 deletions(-) create mode 100644 packages/clerk-js/src/ui/hooks/useScrollLock.ts diff --git a/packages/clerk-js/src/ui/elements/Modal.tsx b/packages/clerk-js/src/ui/elements/Modal.tsx index 5dfbd2c380d..ee4e035aae4 100644 --- a/packages/clerk-js/src/ui/elements/Modal.tsx +++ b/packages/clerk-js/src/ui/elements/Modal.tsx @@ -1,9 +1,9 @@ -import { createContextAndHook } from '@clerk/shared/react'; -import { FloatingOverlay } from '@floating-ui/react'; +import { createContextAndHook, useSafeLayoutEffect } from '@clerk/shared/react'; import React, { useRef } from 'react'; import { descriptors, Flex } from '../customizables'; import { usePopover } from '../hooks'; +import { useScrollLock } from '../hooks/useScrollLock'; import type { ThemableCssProp } from '../styledSystem'; import { animations, mqu } from '../styledSystem'; import { withFloatingTree } from './contexts'; @@ -22,6 +22,7 @@ type ModalProps = React.PropsWithChildren<{ }>; export const Modal = withFloatingTree((props: ModalProps) => { + const { disableScrollLock, enableScrollLock } = useScrollLock(); const { handleClose, handleOpen, contentSx, containerSx, canCloseModal, id, style } = props; const overlayRef = useRef(null); const { floating, isOpen, context, nodeId, toggle } = usePopover({ @@ -38,17 +39,22 @@ export const Modal = withFloatingTree((props: ModalProps) => { handleOpen?.(); } }, [isOpen]); - const modalCtx = React.useMemo(() => ({ value: canCloseModal === false ? {} : { toggle } }), [toggle, canCloseModal]); + useSafeLayoutEffect(() => { + enableScrollLock(); + + return () => { + disableScrollLock(); + }; + }, []); + return ( - {/*Avoid using children with FloatingOverlay */} - scrollbar + const scrollbarX = + Math.round(document.documentElement.getBoundingClientRect().left) + document.documentElement.scrollLeft; + const paddingProp = scrollbarX ? 'paddingLeft' : 'paddingRight'; + const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth; + const scrollX = bodyStyle.left ? parseFloat(bodyStyle.left) : window.scrollX; + const scrollY = bodyStyle.top ? parseFloat(bodyStyle.top) : window.scrollY; + + bodyStyle.overflow = 'hidden'; + + if (scrollbarWidth) { + bodyStyle[paddingProp] = `${scrollbarWidth}px`; + } + + // Only iOS doesn't respect `overflow: hidden` on document.body, and this + // technique has fewer side effects. + if (isIOS) { + // iOS 12 does not support `visualViewport`. + const offsetLeft = window.visualViewport?.offsetLeft || 0; + const offsetTop = window.visualViewport?.offsetTop || 0; + + Object.assign(bodyStyle, { + position: 'fixed', + top: `${-(scrollY - Math.floor(offsetTop))}px`, + left: `${-(scrollX - Math.floor(offsetLeft))}px`, + right: '0', + }); + } + + return () => { + Object.assign(bodyStyle, { + overflow: '', + [paddingProp]: '', + }); + + if (isIOS) { + Object.assign(bodyStyle, { + position: '', + top: '', + left: '', + right: '', + }); + window.scrollTo(scrollX, scrollY); + } + }; +} + +let cleanup = () => {}; + +export function useScrollLock() { + return { + enableScrollLock: () => { + lockCount++; + + if (lockCount === 1) { + cleanup = enableScrollLock(); + } + }, + disableScrollLock: () => { + lockCount--; + if (lockCount === 0) { + cleanup(); + } + }, + }; +} From 2871f3894810ea42ae4beed96127cdc8985f7484 Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Thu, 27 Feb 2025 18:46:46 +0200 Subject: [PATCH 6/8] Update .changeset/mean-roses-dress.md --- .changeset/mean-roses-dress.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/mean-roses-dress.md b/.changeset/mean-roses-dress.md index 04d87ce4f5b..bbd7598c0df 100644 --- a/.changeset/mean-roses-dress.md +++ b/.changeset/mean-roses-dress.md @@ -2,4 +2,4 @@ '@clerk/clerk-js': patch --- -Bug fix: Using `` with children causes modals to get blocked on some sites on chromium browsers. +Fix modal issues by inlining scroll locking mechanism instead of using `` which caused issues in Chromium based browsers From 82dbf5a92dcce121676b5df27772ffb835a62f4c Mon Sep 17 00:00:00 2001 From: Vaggelis Yfantis Date: Thu, 27 Feb 2025 19:36:51 +0200 Subject: [PATCH 7/8] Update packages/clerk-js/src/ui/hooks/useScrollLock.ts --- packages/clerk-js/src/ui/hooks/useScrollLock.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/clerk-js/src/ui/hooks/useScrollLock.ts b/packages/clerk-js/src/ui/hooks/useScrollLock.ts index 6922db88678..e0459f5b38f 100644 --- a/packages/clerk-js/src/ui/hooks/useScrollLock.ts +++ b/packages/clerk-js/src/ui/hooks/useScrollLock.ts @@ -1,3 +1,4 @@ +// Reference: https://github.com/floating-ui/floating-ui/blob/c09c59d6e594c3527888a52ed0f3e8a2978663c2/packages/react/src/components/FloatingOverlay.tsx // Avoid Chrome DevTools blue warning. export function getPlatform(): string { const uaData = (navigator as any).userAgentData as { platform: string } | undefined; From f85ee6a8ad55aa8ff3b13d24d654d164bf8a55f1 Mon Sep 17 00:00:00 2001 From: Bryce Kalow Date: Thu, 27 Feb 2025 15:29:54 -0600 Subject: [PATCH 8/8] Update packages/clerk-js/src/ui/hooks/useScrollLock.ts --- packages/clerk-js/src/ui/hooks/useScrollLock.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/clerk-js/src/ui/hooks/useScrollLock.ts b/packages/clerk-js/src/ui/hooks/useScrollLock.ts index e0459f5b38f..3b3549380fc 100644 --- a/packages/clerk-js/src/ui/hooks/useScrollLock.ts +++ b/packages/clerk-js/src/ui/hooks/useScrollLock.ts @@ -1,4 +1,7 @@ -// Reference: https://github.com/floating-ui/floating-ui/blob/c09c59d6e594c3527888a52ed0f3e8a2978663c2/packages/react/src/components/FloatingOverlay.tsx +// The following code is adapted from Floating UI +// Source: https://github.com/floating-ui/floating-ui/blob/c09c59d6e594c3527888a52ed0f3e8a2978663c2/packages/react/src/components/FloatingOverlay.tsx +// Copyright (c) Floating UI contributors +// SPDX-License-Identifier: MIT // Avoid Chrome DevTools blue warning. export function getPlatform(): string { const uaData = (navigator as any).userAgentData as { platform: string } | undefined;