Web: fix Edit Profile discard warning when pressing backdrop (#8824)

* Web: fix Edit Profile discard warning

* cleanup imports

src/components/Dialog/index.web.tsx

@@ -2,6 +2,7 @@ import React, {useImperativeHandle} from 'react'
 import {
   FlatList,
   type FlatListProps,
+  type GestureResponderEvent,
   type StyleProp,
   TouchableWithoutFeedback,
   View,
@@ -75,9 +76,12 @@ export function Outer({
     [control.id, onClose, setDialogIsOpen],
   )
 
-  const handleBackgroundPress = React.useCallback(async () => {
+  const handleBackgroundPress = React.useCallback(
-    close()
+    async (e: GestureResponderEvent) => {
-  }, [close])
+      webOptions?.onBackgroundPress ? webOptions.onBackgroundPress(e) : close()
+    },
+    [webOptions, close],
+  )
 
   useImperativeHandle(
     control.ref,

src/components/Dialog/types.ts

@@ -1,15 +1,15 @@
-import React from 'react'
+import {
-import type {
+  type AccessibilityProps,
-  AccessibilityProps,
+  type GestureResponderEvent,
-  GestureResponderEvent,
+  type ScrollViewProps,
-  ScrollViewProps,
+  type StyleProp,
+  type ViewStyle,
 } from 'react-native'
-import {ViewStyle} from 'react-native'
+import type React from 'react'
-import {StyleProp} from 'react-native'
 
-import {ViewStyleProp} from '#/alf'
+import {type ViewStyleProp} from '#/alf'
-import {BottomSheetViewProps} from '../../../modules/bottom-sheet'
+import {type BottomSheetViewProps} from '../../../modules/bottom-sheet'
-import {BottomSheetSnapPoint} from '../../../modules/bottom-sheet/src/BottomSheet.types'
+import {type BottomSheetSnapPoint} from '../../../modules/bottom-sheet/src/BottomSheet.types'
 
 type A11yProps = Required<AccessibilityProps>
 
@@ -64,6 +64,7 @@ export type DialogOuterProps = {
   nativeOptions?: Omit<BottomSheetViewProps, 'children'>
   webOptions?: {
     alignCenter?: boolean
+    onBackgroundPress?: (e: GestureResponderEvent) => void
   }
   testID?: string
 }

src/screens/Profile/Header/EditProfileDialog.tsx

@@ -8,7 +8,6 @@ import {urls} from '#/lib/constants'
 import {cleanError} from '#/lib/strings/errors'
 import {useWarnMaxGraphemeCount} from '#/lib/strings/helpers'
 import {logger} from '#/logger'
-import {isWeb} from '#/platform/detection'
 import {type ImageMeta} from '#/state/gallery'
 import {useProfileUpdateMutation} from '#/state/queries/profile'
 import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
@@ -44,20 +43,6 @@ export function EditProfileDialog({
   const cancelControl = Dialog.useDialogControl()
   const [dirty, setDirty] = useState(false)
 
-  // 'You might lose unsaved changes' warning
-  useEffect(() => {
-    if (isWeb && dirty) {
-      const abortController = new AbortController()
-      const {signal} = abortController
-      window.addEventListener('beforeunload', evt => evt.preventDefault(), {
-        signal,
-      })
-      return () => {
-        abortController.abort()
-      }
-    }
-  }, [dirty])
-
   const onPressCancel = useCallback(() => {
     if (dirty) {
       cancelControl.open()
@@ -73,6 +58,15 @@ export function EditProfileDialog({
         preventDismiss: dirty,
         minHeight: SCREEN_HEIGHT,
       }}
+      webOptions={{
+        onBackgroundPress: () => {
+          if (dirty) {
+            cancelControl.open()
+          } else {
+            control.close()
+          }
+        },
+      }}
       testID="editProfileModal">
       <DialogInner
         profile={profile}