Clean up

src/view/com/Dialog/index.web.tsx

@@ -4,13 +4,14 @@ import {FocusScope} from '@tamagui/focus-scope'
 import Animated, {FadeInDown, FadeIn, FadeOut} from 'react-native-reanimated'
 
 import {useTheme, atoms as a, useBreakpoints} from '#/alf'
-import {EventStopper} from '#/view/com/util/EventStopper'
 import {Text} from '#/view/com/Typography'
 import {Portal} from '#/view/com/Portal'
 import {Button} from '#/view/com/Button'
 
 import {DialogProps, DialogControl} from '#/view/com/Dialog/types'
 
+const stopPropagation = (e: any) => e.stopPropagation()
+
 const Context = React.createContext<{
   close: () => void
 }>({
@@ -58,6 +59,8 @@ export function Outer({
   )
 
   React.useEffect(() => {
+    if (!isOpen) return
+
     function handler(e: KeyboardEvent) {
       if (e.key === 'Escape') close()
     }
@@ -65,7 +68,7 @@ export function Outer({
     document.addEventListener('keydown', handler)
 
     return () => document.removeEventListener('keydown', handler)
-  }, [close])
+  }, [isOpen, close])
 
   const context = React.useMemo(() => ({close}), [close])
 
@@ -105,14 +108,20 @@ export function Outer({
                       paddingTop: gtMobile ? ('10vh' as DimensionValue) : 0,
                     },
                   ]}>
-                  <FocusScope loop enabled trapped>
-                    <Animated.View
-                      entering={FadeInDown.duration(200)}
-                      exiting={FadeOut.duration(200)}
-                      aria-role="dialog">
-                      <EventStopper>{children}</EventStopper>
-                    </Animated.View>
-                  </FocusScope>
+                  <View
+                    // @ts-ignore web only -prf
+                    onClick={stopPropagation}
+                    onStartShouldSetResponder={_ => true}
+                    onTouchEnd={stopPropagation}>
+                    <FocusScope loop enabled trapped>
+                      <Animated.View
+                        entering={FadeInDown}
+                        exiting={FadeOut}
+                        aria-role="dialog">
+                        {children}
+                      </Animated.View>
+                    </FocusScope>
+                  </View>
                 </View>
               </View>
             </TouchableWithoutFeedback>

src/view/com/Portal.tsx

@@ -33,8 +33,6 @@ export function Provider(props: React.PropsWithChildren<{}>) {
     setOutlet(<>{Object.values(map.current)}</>)
   }, [])
 
-  console.log(outlet)
-
   return (
     <Context.Provider value={{outlet, append, remove}}>
       {props.children}

src/view/screens/DebugNew.tsx

@@ -334,15 +334,24 @@ function Dialogs() {
       <Dialog.Outer control={control}>
         <Dialog.Inner>
           <Dialog.Handle />
-          <Dialog.Close />
-          <Button
-            type="primary"
-            size="small"
-            onPress={() => control.current.close()}
-            accessibilityLabel="Open basic dialog"
-            accessibilityHint="Open basic dialog">
-            Close basic dialog
-          </Button>
+          <View style={[a.gap_md]}>
+            <Button
+              type="primary"
+              size="small"
+              onPress={() => control.current.close()}
+              accessibilityLabel="Open basic dialog"
+              accessibilityHint="Open basic dialog">
+              Close basic dialog
+            </Button>
+            <Button
+              type="secondary"
+              size="small"
+              onPress={() => control.current.close()}
+              accessibilityLabel="Open basic dialog"
+              accessibilityHint="Open basic dialog">
+              Some other control
+            </Button>
+          </View>
         </Dialog.Inner>
       </Dialog.Outer>
     </>