fix: can't open selects inside modals on firefox (#643)

pluralsh · Sep 23, 2024 · 07d4089 · 07d4089
1 parent 8a2ebf7
commit 07d4089
Show file tree

Hide file tree

Showing 3 changed files with 1,097 additions and 1,080 deletions.
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "@monaco-editor/react": "4.6.0",
     "@radix-ui/react-accordion": "1.2.0",
     "@radix-ui/react-dialog": "1.1.1",
+    "@radix-ui/react-focus-scope": "1.1.0",
     "@react-aria/utils": "3.23.0",
     "@react-hooks-library/core": "0.6.0",
     "@react-spring/web": "9.7.3",
@@ -55,11 +56,11 @@
     "lodash-es": "4.17.21",
     "moment": "2.29.4",
     "react-animate-height": "3.2.3",
-    "react-aria": "3.31.1",
+    "react-aria": "3.34.3",
     "react-embed": "3.7.0",
     "react-markdown": "9.0.1",
     "react-merge-refs": "2.1.1",
-    "react-stately": "3.29.1",
+    "react-stately": "3.32.2",
     "react-use-measure": "2.1.1",
     "rehype-raw": "7.0.0",
     "remark-gfm": "4.0.0",

diff --git a/src/components/ModalWrapper.tsx b/src/components/ModalWrapper.tsx
@@ -4,6 +4,10 @@ import * as Dialog from '@radix-ui/react-dialog'
 import { type ReactNode, forwardRef } from 'react'
 import styled, { type CSSObject, useTheme } from 'styled-components'
 
+import { FocusScope } from '@radix-ui/react-focus-scope'
+
+import WrapWithIf from './WrapWithIf'
+
 const ANIMATION_SPEED = '150ms'
 
 export type ModalWrapperProps = {
@@ -30,12 +34,24 @@ function ModalWrapperRef(
           onClick={(e) => e.stopPropagation()}
           style={overlayStyles}
         >
-          <ContentSC
-            ref={ref}
-            {...props}
+          <WrapWithIf
+            condition={// band-aid for firefox not letting our select component open inside a modal
+            // see https://github.com/radix-ui/primitives/issues/2544
+            navigator?.userAgent.toLowerCase().includes('firefox')}
+            wrapper={
+              <FocusScope
+                trapped={false}
+                loop
+              />
+            }
           >
-            {children}
-          </ContentSC>
+            <ContentSC
+              ref={ref}
+              {...props}
+            >
+              {children}
+            </ContentSC>
+          </WrapWithIf>
         </OverlaySC>
       </Dialog.Portal>
     </Dialog.Root>