fix(app): Fix scrolling behind long press modals (#16206)

fix RQA-3139
Opentrons · Sep 9, 2024 · eeb0eeb · eeb0eeb
1 parent 877d5a5
commit eeb0eeb
Showing 1 changed file with 17 additions and 12 deletions.
diff --git a/app/src/atoms/MenuList/index.tsx b/app/src/atoms/MenuList/index.tsx
@@ -8,6 +8,8 @@ import {
   BORDERS,
   JUSTIFY_CENTER,
 } from '@opentrons/components'
+import { createPortal } from 'react-dom'
+import { getTopPortalEl } from '../../App/portal'
 import { LegacyModalShell } from '../../molecules/LegacyModal'
 
 interface MenuListProps {
@@ -19,19 +21,22 @@ interface MenuListProps {
 export const MenuList = (props: MenuListProps): JSX.Element | null => {
   const { children, isOnDevice = false, onClick = null } = props
   return isOnDevice && onClick != null ? (
-    <LegacyModalShell
-      borderRadius={BORDERS.borderRadius16}
-      width="max-content"
-      onOutsideClick={onClick}
-    >
-      <Flex
-        boxShadow={BORDERS.shadowSmall}
-        flexDirection={DIRECTION_COLUMN}
-        justifyContent={JUSTIFY_CENTER}
+    createPortal(
+      <LegacyModalShell
+        borderRadius={BORDERS.borderRadius16}
+        width="max-content"
+        onOutsideClick={onClick}
       >
-        {children}
-      </Flex>
-    </LegacyModalShell>
+        <Flex
+          boxShadow={BORDERS.shadowSmall}
+          flexDirection={DIRECTION_COLUMN}
+          justifyContent={JUSTIFY_CENTER}
+        >
+          {children}
+        </Flex>
+      </LegacyModalShell>,
+      getTopPortalEl()
+    )
   ) : (
     <Flex
       borderRadius="4px 4px 0px 0px"