fix(base-modal): modal scroll (#820)

* fix(base-modal): fix scroll * fix(base-modal): container styles restore
core-ds · Sep 10, 2021 · 1b2d94a · 1b2d94a
1 parent 0d5b2a3
commit 1b2d94a
Show file tree

Hide file tree

Showing 8 changed files with 133 additions and 75 deletions.
diff --git a/packages/base-modal/src/Component.test.tsx b/packages/base-modal/src/Component.test.tsx
@@ -79,26 +79,26 @@ describe('BaseModal', () => {
         it('should attach a handler to the backdrop that fires onClose', () => {
             const onClose = jest.fn();
             const { getByRole } = render(modal({ onClose }));
-            const backdrop = getByRole('dialog').firstChild as HTMLElement;
-            fireEvent.click(backdrop);
+
+            fireEvent.click(getByRole('dialog'));
 
             expect(onClose.mock.calls.length).toBe(1);
         });
 
         it('should let the user disable backdrop click triggering onClose', () => {
             const onClose = jest.fn();
             const { getByRole } = render(modal({ onClose, disableBackdropClick: true }));
-            const backdrop = getByRole('dialog').firstChild as HTMLElement;
-            fireEvent.click(backdrop);
+
+            fireEvent.click(getByRole('dialog'));
 
             expect(onClose.mock.calls.length).toBe(0);
         });
 
         it('should call through to the user specified onBackdropClick callback', () => {
             const onBackdropClick = jest.fn();
             const { getByRole } = render(modal({ onBackdropClick }));
-            const backdrop = getByRole('dialog').firstChild as HTMLElement;
-            fireEvent.click(backdrop);
+
+            fireEvent.click(getByRole('dialog'));
 
             expect(onBackdropClick.mock.calls.length).toBe(1);
         });

diff --git a/packages/base-modal/src/Component.tsx b/packages/base-modal/src/Component.tsx
@@ -24,7 +24,13 @@ import { Portal, PortalProps } from '@alfalab/core-components-portal';
 import { Backdrop as DefaultBackdrop, BackdropProps } from '@alfalab/core-components-backdrop';
 import { Stack, stackingOrder } from '@alfalab/core-components-stack';
 
-import { handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop } from './utils';
+import {
+    handleContainer,
+    hasScrollbar,
+    isScrolledToBottom,
+    isScrolledToTop,
+    restoreContainerStyles,
+} from './utils';
 
 import styles from './index.module.css';
 
@@ -222,7 +228,7 @@ export const BaseModal = forwardRef<HTMLDivElement, BaseModalProps>(
         const wrapperRef = useRef<HTMLDivElement>(null);
         const scrollableNodeRef = useRef<HTMLDivElement | null>(null);
         const contentNodeRef = useRef<HTMLDivElement | null>(null);
-        const restoreContainerStyles = useRef<null | Function>(null);
+        const restoreContainerStylesRef = useRef<null | Function>(null);
 
         const checkToHasScrollBar = () => {
             if (scrollableNodeRef.current) {
@@ -234,6 +240,10 @@ export const BaseModal = forwardRef<HTMLDivElement, BaseModalProps>(
 
         const shouldRender = keepMounted || open || !exited;
 
+        const getContainer = useCallback(() => {
+            return (container ? container() : document.body) as HTMLElement;
+        }, [container]);
+
         const resizeObserver = useMemo(() => new ResizeObserver(checkToHasScrollBar), []);
 
         const addResizeHandle = useCallback(() => {
@@ -294,7 +304,7 @@ export const BaseModal = forwardRef<HTMLDivElement, BaseModalProps>(
         );
 
         const handleBackdropClick = (event: MouseEvent<HTMLElement>) => {
-            if (!disableBackdropClick) {
+            if (!disableBackdropClick && event.target === wrapperRef.current) {
                 handleClose(event, 'backdropClick');
             }
         };
@@ -361,34 +371,35 @@ export const BaseModal = forwardRef<HTMLDivElement, BaseModalProps>(
 
                 if (onUnmount) onUnmount();
 
-                if (restoreContainerStyles.current) {
-                    restoreContainerStyles.current();
-                    restoreContainerStyles.current = null;
+                if (restoreContainerStylesRef.current) {
+                    restoreContainerStylesRef.current();
                 }
             },
             [handleScroll, onUnmount, removeResizeHandle, transitionProps],
         );
 
         useEffect(() => {
             if (open) {
-                restoreContainerStyles.current = handleContainer(
-                    (container ? container() : document.body) as HTMLElement,
-                );
+                handleContainer(getContainer());
+
+                restoreContainerStylesRef.current = () => {
+                    restoreContainerStylesRef.current = null;
+                    restoreContainerStyles(getContainer());
+                };
             }
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, [open]);
+        }, [getContainer, open]);
 
         useEffect(() => {
             if (open) setExited(false);
         }, [open]);
 
         useEffect(() => {
             return () => {
-                resizeObserver.disconnect();
-
-                if (restoreContainerStyles.current) {
-                    restoreContainerStyles.current();
+                if (restoreContainerStylesRef.current) {
+                    restoreContainerStylesRef.current();
                 }
+
+                resizeObserver.disconnect();
             };
             // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
@@ -428,27 +439,30 @@ export const BaseModal = forwardRef<HTMLDivElement, BaseModalProps>(
                                 disabled={disableFocusLock || !open}
                                 returnFocus={!disableRestoreFocus}
                             >
+                                {Backdrop && (
+                                    <Backdrop
+                                        {...backdropProps}
+                                        className={cn(backdropProps.className, styles.backdrop)}
+                                        open={open}
+                                        style={{
+                                            zIndex: computedZIndex,
+                                        }}
+                                    />
+                                )}
                                 <div
                                     role='dialog'
                                     className={cn(styles.wrapper, wrapperClassName, {
                                         [styles.hidden]: !open && exited,
                                     })}
                                     ref={mergeRefs([ref, wrapperRef])}
                                     onKeyDown={handleKeyDown}
+                                    onClick={handleBackdropClick}
                                     tabIndex={-1}
                                     data-test-id={dataTestId}
                                     style={{
                                         zIndex: computedZIndex,
                                     }}
                                 >
-                                    {Backdrop && (
-                                        <Backdrop
-                                            {...backdropProps}
-                                            className={cn(backdropProps.className, styles.backdrop)}
-                                            open={open}
-                                            onClick={handleBackdropClick}
-                                        />
-                                    )}
                                     <CSSTransition
                                         appear={true}
                                         timeout={200}

diff --git a/packages/base-modal/src/index.module.css b/packages/base-modal/src/index.module.css
@@ -35,7 +35,7 @@
 }
 
 .backdrop {
-    z-index: -1;
+    z-index: 0;
 }
 
 .appear,

diff --git a/packages/base-modal/src/utils.ts b/packages/base-modal/src/utils.ts
@@ -37,18 +37,56 @@ const getPaddingRight = (node: Element) => {
     return parseInt(window.getComputedStyle(node).paddingRight, 10) || 0;
 };
 
-export const handleContainer = (container: HTMLElement) => {
-    const restoreStyle: Array<{
-        value: string;
-        key: string;
-        el: HTMLElement;
-    }> = [];
+type SavedStyle = {
+    value: string;
+    key: string;
+    el: HTMLElement;
+};
+
+const restoreStylesStore: Array<{
+    container: HTMLElement;
+    modals: number;
+    styles: SavedStyle[];
+}> = [];
+
+export const restoreContainerStyles = (container: HTMLElement) => {
+    const index = restoreStylesStore.findIndex(s => s.container === container);
+    const existingStyles = restoreStylesStore[index];
+
+    if (!existingStyles) return;
+
+    existingStyles.modals -= 1;
+
+    if (existingStyles.modals <= 0) {
+        restoreStylesStore.splice(index, 1);
+
+        existingStyles.styles.forEach(({ value, el, key }) => {
+            if (value) {
+                el.style.setProperty(key, value);
+            } else {
+                el.style.removeProperty(key);
+            }
+        });
+    }
+};
+
+export const handleContainer = (container?: HTMLElement) => {
+    if (!container) return;
+
+    const existingStyles = restoreStylesStore.find(s => s.container === container);
+
+    if (existingStyles) {
+        existingStyles.modals += 1;
+        return;
+    }
+
+    const containerStyles: SavedStyle[] = [];
 
     if (isOverflowing(container)) {
         // Вычисляет размер до применения `overflow hidden` для избежания скачков
         const scrollbarSize = getScrollbarSize();
 
-        restoreStyle.push({
+        containerStyles.push({
             value: container.style.paddingRight,
             key: 'padding-right',
             el: container,
@@ -69,21 +107,18 @@ export const handleContainer = (container: HTMLElement) => {
 
     // Блокируем скролл даже если отсутствует скроллбар
     if (scrollContainer.style.overflow !== 'hidden') {
-        restoreStyle.push({
+        containerStyles.push({
             value: scrollContainer.style.overflow,
             key: 'overflow',
             el: scrollContainer,
         });
     }
+
     scrollContainer.style.overflow = 'hidden';
 
-    return () => {
-        restoreStyle.forEach(({ value, el, key }) => {
-            if (value) {
-                el.style.setProperty(key, value);
-            } else {
-                el.style.removeProperty(key);
-            }
-        });
-    };
+    restoreStylesStore.push({
+        container,
+        modals: 1,
+        styles: containerStyles,
+    });
 };
diff --git a/packages/bottom-sheet/src/__snapshots__/component.test.tsx.snap b/packages/bottom-sheet/src/__snapshots__/component.test.tsx.snap
@@ -21,20 +21,20 @@ exports[`Bottom sheet Snapshots tests should match snapshot 1`] = `
     <div
       data-focus-lock-disabled="false"
     >
+      <div
+        style="opacity: 1; transition: opacity 300ms ease-in-out; position: relative; z-index: 100;"
+      >
+        <div
+          aria-hidden="true"
+          class="backdrop appear appearActive"
+        />
+      </div>
       <div
         class="wrapper"
         role="dialog"
         style="z-index: 100;"
         tabindex="-1"
       >
-        <div
-          style="opacity: 1; transition: opacity 300ms ease-in-out;"
-        >
-          <div
-            aria-hidden="true"
-            class="backdrop appear appearActive"
-          />
-        </div>
         <div
           class="component modal appear appearActive"
         >
@@ -97,20 +97,20 @@ exports[`Bottom sheet Snapshots tests should match snapshot with action button 1
     <div
       data-focus-lock-disabled="false"
     >
+      <div
+        style="opacity: 1; transition: opacity 300ms ease-in-out; position: relative; z-index: 100;"
+      >
+        <div
+          aria-hidden="true"
+          class="backdrop appear appearActive"
+        />
+      </div>
       <div
         class="wrapper"
         role="dialog"
         style="z-index: 100;"
         tabindex="-1"
       >
-        <div
-          style="opacity: 1; transition: opacity 300ms ease-in-out;"
-        >
-          <div
-            aria-hidden="true"
-            class="backdrop appear appearActive"
-          />
-        </div>
         <div
           class="component modal appear appearActive"
         >

diff --git a/packages/bottom-sheet/src/component.test.tsx b/packages/bottom-sheet/src/component.test.tsx
@@ -166,22 +166,32 @@ describe('Bottom sheet', () => {
     });
 
     describe('Interactions tests', () => {
-        it('should close if on backdrop click', async () => {
+        it('should close on dialog click', async () => {
             const { getByTestId, queryByTestId } = render(
                 <BottomSheetWrapper dataTestId={dataTestId} />,
             );
 
-            const backdrop = document.querySelector('.backdrop');
-
-            if (backdrop) {
-                fireEvent.click(backdrop);
-            }
+            fireEvent.click(getByTestId(dataTestId));
 
             await waitForElementToBeRemoved(() => getByTestId(dataTestId));
 
-            const component = await queryByTestId(dataTestId);
+            expect(queryByTestId(dataTestId)).not.toBeInTheDocument();
+        });
 
-            expect(component).not.toBeInTheDocument();
+        it('should not close on dialog content click', async () => {
+            const { getByTestId, queryByTestId } = render(
+                <BottomSheetWrapper dataTestId={dataTestId} />,
+            );
+
+            const content = getByTestId(dataTestId).firstElementChild as HTMLElement;
+
+            if (content) {
+                fireEvent.click(content);
+            }
+
+            await new Promise(res => setTimeout(res, 1000));
+
+            expect(queryByTestId(dataTestId)).toBeInTheDocument();
         });
 
         it('should swiping on touchmove', async () => {

diff --git a/packages/bottom-sheet/src/components/swipeable-backdrop/Component.tsx b/packages/bottom-sheet/src/components/swipeable-backdrop/Component.tsx
@@ -24,13 +24,16 @@ export const SwipeableBackdrop: FC<SwipeableBackdropProps> = ({
     opacity,
     handlers,
     opacityTimeout,
+    style,
     ...backdropProps
 }) => (
     <div
         {...handlers}
         style={{
             opacity,
             transition: opacity === 1 ? `opacity ${opacityTimeout}ms ease-in-out` : '',
+            position: 'relative',
+            ...style,
         }}
     >
         <Backdrop {...backdropProps} />

diff --git a/packages/drawer/src/__snapshots__/Component.test.tsx.snap b/packages/drawer/src/__snapshots__/Component.test.tsx.snap
@@ -8,10 +8,6 @@ exports[`Drawer should match snapshot 1`] = `
   style="z-index: 100;"
   tabindex="-1"
 >
-  <div
-    aria-hidden="true"
-    class="backdrop backdropEnter backdropEnterActive"
-  />
   <div
     class="component enter enterActive"
   >