fix: modal body scrolling (#10157)

Author: premiumjibles

src/components/ManageAccountsDrawer/components/DrawerWrapper.tsx

@@ -7,11 +7,14 @@ export type DrawerWrapperProps = {
   variant?: string
 }
 
+// This prevents manage accounts modal from blocking pointer events here when it's open
+const overrideStyles = { pointerEvents: 'auto' as const }
+
 export const DrawerWrapper = ({ children, isOpen, onClose, variant }: DrawerWrapperProps) => {
   return (
     <Drawer isOpen={isOpen} size='lg' placement='right' onClose={onClose} variant={variant}>
-      <DrawerOverlay zIndex='modal' />
-      <DrawerContent>
+      <DrawerOverlay zIndex='modal' style={overrideStyles} />
+      <DrawerContent style={overrideStyles}>
         <DrawerCloseButton top='calc(env(safe-area-inset-top) + var(--safe-area-inset-top) + 1rem)' />
         {children}
       </DrawerContent>

src/components/MobileWalletDialog/MobileWalletDialog.tsx

@@ -69,12 +69,7 @@ export const MobileWalletDialog: React.FC<MobileWalletDialogProps> = ({
   }, [mobileWalletDialog])
 
   return (
-    <Dialog
-      isOpen={mobileWalletDialog.isOpen}
-      onClose={handleClose}
-      height='auto'
-      isDisablingPropagation={false}
-    >
+    <Dialog isOpen={mobileWalletDialog.isOpen} onClose={handleClose} height='auto'>
       <MemoryRouter>
         <MobileDialogRoutes defaultRoute={defaultRoute} onClose={handleClose} />
       </MemoryRouter>

src/components/Modal/components/Dialog.tsx

@@ -1,4 +1,4 @@
-import { Box, Modal, ModalContent, ModalOverlay, useMediaQuery } from '@chakra-ui/react'
+import { Modal, ModalContent, ModalOverlay, useMediaQuery } from '@chakra-ui/react'
 import styled from '@emotion/styled'
 import type { PropsWithChildren } from 'react'
 import React, { useEffect, useLayoutEffect, useMemo, useState } from 'react'
@@ -16,7 +16,6 @@ export type DialogProps = {
   onClose: () => void
   height?: string
   isFullScreen?: boolean
-  isDisablingPropagation?: boolean
 } & PropsWithChildren
 
 const CustomDrawerContent = styled(Drawer.Content)`
@@ -45,7 +44,6 @@ const DialogWindow: React.FC<DialogProps> = ({
   height,
   isFullScreen,
   children,
-  isDisablingPropagation = true,
 }) => {
   const [isLargerThanMd] = useMediaQuery(`(min-width: ${breakpoints['md']})`, { ssr: false })
   const { snapPoint, setIsOpen, isOpen: isDialogOpen } = useDialog()
@@ -75,30 +73,6 @@ const DialogWindow: React.FC<DialogProps> = ({
     setIsOpen(isOpen)
   }, [isOpen, setIsOpen])
 
-  // This is a workaround to prevent the body to be pointer-events: none when the dialog is open if isDisablingPropagation is false
-  useEffect(() => {
-    if (!isDialogOpen) return
-    if (isDisablingPropagation) return
-
-    const originalPointerEvents = document.body.style.pointerEvents
-    const focusGuardedElements = document.querySelectorAll<HTMLElement>('*[data-radix-focus-guard]')
-
-    const raf = window.requestAnimationFrame(() => {
-      document.body.style.pointerEvents = 'auto'
-      focusGuardedElements.forEach(element => {
-        element.style.pointerEvents = 'auto'
-      })
-    })
-
-    return () => {
-      window.cancelAnimationFrame(raf)
-      document.body.style.pointerEvents = originalPointerEvents
-      focusGuardedElements.forEach(element => {
-        element.style.pointerEvents = 'inherit'
-      })
-    }
-  }, [isDialogOpen, isDisablingPropagation])
-
   // If we stack multiple modals and drawers on mobile then we shouldn't trap focus
   useLayoutEffect(() => {
     if (!isMobile || isLargerThanMd) return
@@ -118,20 +92,11 @@ const DialogWindow: React.FC<DialogProps> = ({
         repositionInputs={isFullScreen ? true : false}
         open={isDialogOpen}
         onClose={onClose}
-        activeSnapPoint={isDisablingPropagation ? snapPoint : undefined}
-        modal={false}
+        activeSnapPoint={snapPoint}
+        modal
       >
         <Drawer.Portal>
-          {!isDisablingPropagation ? (
-            <Box
-              bg='rgba(0, 0, 0, 0.8)'
-              position='fixed'
-              inset={0}
-              zIndex='overlay'
-              onClick={onClose}
-            />
-          ) : null}
-          {isDisablingPropagation ? <CustomDrawerOverlay onClick={onClose} /> : null}
+          <CustomDrawerOverlay onClick={onClose} />
           <CustomDrawerContent style={contentStyle}>{children}</CustomDrawerContent>
         </Drawer.Portal>
       </Drawer.Root>

src/components/Modals/ManageAccounts/ManageAccountsModal.tsx

@@ -121,13 +121,7 @@ export const ManageAccountsModal = ({ onBack }: ManageAccountsModalProps) => {
 
   return (
     <>
-      <Dialog
-        isOpen={isOpen}
-        onClose={close}
-        isDisablingPropagation={false}
-        isFullScreen={false}
-        height='auto'
-      >
+      <Dialog isOpen={isOpen} onClose={close} isFullScreen={false} height='auto'>
         <ManageAccountsDrawer
           isOpen={isDrawerOpen}
           onClose={handleDrawerClose}

src/components/MultiHopTrade/components/TradeInput/components/HighlightedTokensCategoryDialog.tsx

@@ -55,7 +55,7 @@ export const HighlightedTokensCategoryDialog = ({
   handleCategoryChange,
 }: HighlightedTokensCategoryDialogProps) => {
   return (
-    <Dialog isOpen={isOpen} onClose={onClose} height='auto' isDisablingPropagation={false}>
+    <Dialog isOpen={isOpen} onClose={onClose} height='auto'>
       <Box
         py={4}
         pb='calc(env(safe-area-inset-bottom) + var(--safe-area-inset-bottom) + var(--chakra-space-4))'

src/components/MultiHopTrade/components/TradeInput/components/HighlightedTokensFiltersDialog.tsx

@@ -97,7 +97,7 @@ export const HighlightedTokensFiltersDialog = ({
   ])
 
   return (
-    <Dialog isOpen={isOpen} onClose={onClose} height='auto' isDisablingPropagation={false}>
+    <Dialog isOpen={isOpen} onClose={onClose} height='auto'>
       <Box height='5px' width='36px' borderRadius='full' bg='gray.500' mb={4} mx='auto' my={4} />
       <Box
         pb='calc(env(safe-area-inset-bottom) + var(--safe-area-inset-bottom) + var(--chakra-space-4))'