From d7c08d390739094f6731fe0a8a1567adcbdb0ad0 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Tue, 8 Oct 2024 12:54:45 +0300
Subject: [PATCH] use @radix-ui/dismissable-layer for escape handling

---
 package.json                        |  1 +
 src/components/Dialog/index.web.tsx | 28 +++++++++-------------------
 yarn.lock                           |  2 +-
 3 files changed, 11 insertions(+), 20 deletions(-)

diff --git a/package.json b/package.json
index 338273c9d0..8b3e3f9667 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
     "@lingui/react": "^4.5.0",
     "@mattermost/react-native-paste-input": "^0.7.1",
     "@miblanchard/react-native-slider": "^2.3.1",
+    "@radix-ui/react-dismissable-layer": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-focus-guards": "^1.1.1",
     "@radix-ui/react-focus-scope": "^1.1.0",
diff --git a/src/components/Dialog/index.web.tsx b/src/components/Dialog/index.web.tsx
index 1165f7d8d4..f30e9f1979 100644
--- a/src/components/Dialog/index.web.tsx
+++ b/src/components/Dialog/index.web.tsx
@@ -10,6 +10,7 @@ import {
 import Animated, {FadeIn, FadeInDown} from 'react-native-reanimated'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import {DismissableLayer} from '@radix-ui/react-dismissable-layer'
 import {useFocusGuards} from '@radix-ui/react-focus-guards'
 import {FocusScope} from '@radix-ui/react-focus-scope'
 
@@ -32,6 +33,7 @@ export * from '#/components/Dialog/utils'
 export {Input} from '#/components/forms/TextField'
 
 const stopPropagation = (e: any) => e.stopPropagation()
+const preventDefault = (e: any) => e.preventDefault()
 
 export function Outer({
   children,
@@ -86,21 +88,6 @@ export function Outer({
     [close, open],
   )
 
-  React.useEffect(() => {
-    if (!isOpen) return
-
-    function handler(e: KeyboardEvent) {
-      if (e.key === 'Escape') {
-        e.stopPropagation()
-        close()
-      }
-    }
-
-    document.addEventListener('keydown', handler)
-
-    return () => document.removeEventListener('keydown', handler)
-  }, [close, isOpen])
-
   const context = React.useMemo(
     () => ({
       close,
@@ -171,6 +158,7 @@ export function Inner({
   contentContainerStyle,
 }: DialogInnerProps) {
   const t = useTheme()
+  const {close} = React.useContext(Context)
   const {gtMobile} = useBreakpoints()
   useFocusGuards()
   return (
@@ -202,10 +190,12 @@ export function Inner({
           },
           style,
         ])}>
-        {header}
-        <View style={[gtMobile ? a.p_2xl : a.p_xl, contentContainerStyle]}>
-          {children}
-        </View>
+        <DismissableLayer onFocusOutside={preventDefault} onDismiss={close}>
+          {header}
+          <View style={[gtMobile ? a.p_2xl : a.p_xl, contentContainerStyle]}>
+            {children}
+          </View>
+        </DismissableLayer>
       </Animated.View>
     </FocusScope>
   )
diff --git a/yarn.lock b/yarn.lock
index 2791a8029d..cd689c1364 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5076,7 +5076,7 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.1.0.tgz#a7d39855f4d077adc2a1922f9c353c5977a09cdc"
   integrity sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==
 
-"@radix-ui/react-dismissable-layer@1.1.1":
+"@radix-ui/react-dismissable-layer@1.1.1", "@radix-ui/react-dismissable-layer@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.1.tgz#cbdcb739c5403382bdde5f9243042ba643883396"
   integrity sha512-QSxg29lfr/xcev6kSz7MAlmDnzbP1eI/Dwn3Tp1ip0KT5CUELsxkekFEMVBEoykI3oV39hKT4TKZzBNMbcTZYQ==