From f1a2d8110c35586079e40acb1d39abf44b971bc6 Mon Sep 17 00:00:00 2001 From: Ryan Date: Sun, 26 May 2024 09:54:08 +1000 Subject: [PATCH 1/2] Fix sheet losing scroll behaviour --- src/app/dim-ui/Sheet.tsx | 7 +++++-- src/app/dim-ui/useFixOverscrollBehavior.ts | 7 ++++--- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/app/dim-ui/Sheet.tsx b/src/app/dim-ui/Sheet.tsx index 6493d8add7..0abc1705b2 100644 --- a/src/app/dim-ui/Sheet.tsx +++ b/src/app/dim-ui/Sheet.tsx @@ -153,6 +153,7 @@ export default function Sheet({ }) { const sheet = useRef(null); const sheetContents = useRef(null); + const childrenContainer = useRef(null); const [frozenHeight, setFrozenHeight] = useState(undefined); const frozenHeightIntervalRef = useRef(undefined); @@ -204,7 +205,7 @@ export default function Sheet({ [dragControls], ); - useFixOverscrollBehavior(sheetContents); + useFixOverscrollBehavior(sheetContents, childrenContainer); // When drag ends we determine if the sheet should be closed either via the final // drag velocity or if the sheet has been dragged halfway the down from its height. @@ -253,6 +254,8 @@ export default function Sheet({ }; }, []); + const childrenNode = _.isFunction(children) ? children({ onClose: triggerClose }) : children; + const sheetBody = ( - {_.isFunction(children) ? children({ onClose: triggerClose }) : children} +
{childrenNode}
{Boolean(footer) && ( diff --git a/src/app/dim-ui/useFixOverscrollBehavior.ts b/src/app/dim-ui/useFixOverscrollBehavior.ts index 0f3ec1a90f..ac941baf48 100644 --- a/src/app/dim-ui/useFixOverscrollBehavior.ts +++ b/src/app/dim-ui/useFixOverscrollBehavior.ts @@ -16,9 +16,10 @@ import useResizeObserver from '@react-hook/resize-observer'; * https://github.com/w3c/csswg-drafts/issues/3349#issuecomment-492721871 and * https://bugs.chromium.org/p/chromium/issues/detail?id=813094 */ -export function useFixOverscrollBehavior(ref: React.RefObject) { - useResizeObserver(ref, (entry) => { - const elem = entry.target as HTMLElement; +export function useFixOverscrollBehavior(...refs: React.RefObject[]) { + const measured = refs.length === 1 ? refs[0] : refs[1]; + useResizeObserver(measured, () => { + const elem = refs[0].current!; if (elem.scrollHeight > elem.clientHeight) { // Scrollable contents elem.style.overflowY = 'auto'; From fbe1dc9822772c248fa539c9bfd31c1cb8c51877 Mon Sep 17 00:00:00 2001 From: Ryan Date: Sun, 26 May 2024 10:00:59 +1000 Subject: [PATCH 2/2] Remove unrelated changes --- src/app/dim-ui/Sheet.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/dim-ui/Sheet.tsx b/src/app/dim-ui/Sheet.tsx index 0abc1705b2..c267c9389d 100644 --- a/src/app/dim-ui/Sheet.tsx +++ b/src/app/dim-ui/Sheet.tsx @@ -254,8 +254,6 @@ export default function Sheet({ }; }, []); - const childrenNode = _.isFunction(children) ? children({ onClose: triggerClose }) : children; - const sheetBody = ( -
{childrenNode}
+
+ {_.isFunction(children) ? children({ onClose: triggerClose }) : children} +
{Boolean(footer) && (