From 386184597bfe3e8d9de362c23fb7f4c16237ab55 Mon Sep 17 00:00:00 2001 From: Artur Malinowski Date: Wed, 4 Dec 2024 12:01:52 +0100 Subject: [PATCH] fix wrong behaviour for multiple Dialogs (#2821) --- src/components/dialog/useBodyNoScroll.ts | 44 ++++++------------------ 1 file changed, 11 insertions(+), 33 deletions(-) diff --git a/src/components/dialog/useBodyNoScroll.ts b/src/components/dialog/useBodyNoScroll.ts index 7b525b85d..81dd79281 100644 --- a/src/components/dialog/useBodyNoScroll.ts +++ b/src/components/dialog/useBodyNoScroll.ts @@ -1,7 +1,6 @@ import * as React from 'react'; const NO_SCROLL_CLASS = 'sg-dialog-no-scroll'; -const DIALOG_SELECTOR = '.js-dialog'; export function useBodyNoScroll(overlayRef: {current: HTMLDivElement | null}) { const cleanupRef = React.useRef(null); @@ -11,47 +10,26 @@ export function useBodyNoScroll(overlayRef: {current: HTMLDivElement | null}) { }, []); React.useEffect(() => { - // @todo Use React Context API for detecting nested components - // https://github.com/brainly/style-guide/issues/2795 - const isNestedDialog = - overlayRef.current?.parentElement?.closest(DIALOG_SELECTOR); - - if (isNestedDialog) { - // if dialog is nested, this logic was already fired by parent dialog - // it prevents an issue with no cleanup when nested dialogs - return; - } - const body = document.body; - const scrollY = window.scrollY; if (!body) return; - body.style.top = `-${scrollY}px`; + + const initialBodyClassList = body.classList.value; + const initialBodyStyleTop = body.style.top; + + if (initialBodyClassList.includes(NO_SCROLL_CLASS)) { + return; + } + + body.style.top = `-${window.scrollY}px`; body.classList.add(NO_SCROLL_CLASS); const cleanup = () => { // it can only be forced once cleanupRef.current = null; - const dialogsOpenCount = - document.querySelectorAll(DIALOG_SELECTOR).length; - const nestedOpenDialogsCount = - // @ts-ignore TS2532 - overlayRef.current?.querySelectorAll(DIALOG_SELECTOR).length | 0; - - // nested dialogs shouldn't be counted - // as a parent for nested dialogs, this particular one should perfrom the cleanup - const notNestedDialogsOpenCount = - dialogsOpenCount - nestedOpenDialogsCount; - - const manyDialogsOpened = notNestedDialogsOpenCount > 1; - - if (manyDialogsOpened) { - return; - } - - body.style.top = ''; - body.classList.remove(NO_SCROLL_CLASS); + body.style.top = initialBodyStyleTop; + body.className = initialBodyClassList; window.scrollTo(0, scrollY); };