From d00f86c3ce0e7af7ff3d669aec825215680dcbbf Mon Sep 17 00:00:00 2001
From: pengx17 <pengxiao@outlook.com>
Date: Tue, 3 Sep 2024 12:00:00 +0000
Subject: [PATCH] fix(core): handle modal overlay click event correctly (#8063)

1. overlay click + hide is brought back. this is because modal (ormobile menu)'s `onPointerDownOutside` is bound to document.body. Code in https://github.com/toeverything/AFFiNE/blob/e58af08f6325c7c2c6cbd3325e954fd7d2ab6859/packages/frontend/core/src/modules/explorer/views/tree/node.tsx#L353-L356 will stop the event from bubbling to the document element.
2. when Menu's set to modal=true, the parent is set to pointer-events: none as well. changed menu to modal false instead.

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/3e50281f-839d-4463-af00-dff2fce8202b.png)
---
 .../src/components/rename-modal/index.tsx       |  1 +
 .../component/src/ui/menu/desktop/root.tsx      | 13 +++++++++++--
 .../frontend/component/src/ui/modal/modal.tsx   | 17 ++++++++++++++++-
 tests/kit/utils/properties.ts                   |  5 ++---
 4 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/component/src/components/rename-modal/index.tsx b/packages/frontend/component/src/components/rename-modal/index.tsx
index 37cfceb42b..acf06429a3 100644
--- a/packages/frontend/component/src/components/rename-modal/index.tsx
+++ b/packages/frontend/component/src/components/rename-modal/index.tsx
@@ -41,6 +41,7 @@ export const RenameModal = ({
   return (
     <Menu
       rootOptions={{
+        modal: true,
         open: open,
         onOpenChange: onOpenChange,
       }}
diff --git a/packages/frontend/component/src/ui/menu/desktop/root.tsx b/packages/frontend/component/src/ui/menu/desktop/root.tsx
index 5c91ec2190..9bcfc26c5d 100644
--- a/packages/frontend/component/src/ui/menu/desktop/root.tsx
+++ b/packages/frontend/component/src/ui/menu/desktop/root.tsx
@@ -10,7 +10,7 @@ export const DesktopMenu = ({
   children,
   items,
   portalOptions,
-  rootOptions: { onOpenChange, defaultOpen, ...rootOptions } = {},
+  rootOptions: { onOpenChange, defaultOpen, modal, ...rootOptions } = {},
   contentOptions: {
     className = '',
     style: contentStyle = {},
@@ -30,9 +30,18 @@ export const DesktopMenu = ({
     <DropdownMenu.Root
       onOpenChange={handleOpenChange}
       defaultOpen={defaultOpen}
+      modal={modal ?? false}
       {...rootOptions}
     >
-      <DropdownMenu.Trigger asChild>{children}</DropdownMenu.Trigger>
+      <DropdownMenu.Trigger
+        asChild
+        onClick={e => {
+          e.stopPropagation();
+          e.preventDefault();
+        }}
+      >
+        {children}
+      </DropdownMenu.Trigger>
 
       <DropdownMenu.Portal {...portalOptions}>
         <DropdownMenu.Content
diff --git a/packages/frontend/component/src/ui/modal/modal.tsx b/packages/frontend/component/src/ui/modal/modal.tsx
index 47eb29a779..6eb5c7b61a 100644
--- a/packages/frontend/component/src/ui/modal/modal.tsx
+++ b/packages/frontend/component/src/ui/modal/modal.tsx
@@ -9,7 +9,7 @@ import * as Dialog from '@radix-ui/react-dialog';
 import * as VisuallyHidden from '@radix-ui/react-visually-hidden';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
-import type { CSSProperties } from 'react';
+import type { CSSProperties, MouseEvent } from 'react';
 import { forwardRef, useCallback, useEffect, useState } from 'react';
 
 import { isMobile } from '../../utils/env';
@@ -139,6 +139,7 @@ export const ModalInner = forwardRef<HTMLDivElement, ModalProps>(
       overlayOptions: {
         className: overlayClassName,
         style: overlayStyle,
+        onClick: onOverlayClick,
         ...otherOverlayOptions
       } = {},
       closeButtonOptions,
@@ -189,6 +190,19 @@ export const ModalInner = forwardRef<HTMLDivElement, ModalProps>(
       [onEscapeKeyDown, persistent]
     );
 
+    const handleOverlayClick = useCallback(
+      (e: MouseEvent<HTMLDivElement>) => {
+        onOverlayClick?.(e);
+        if (persistent) {
+          e.preventDefault();
+        } else {
+          e.stopPropagation();
+          onOpenChange?.(false);
+        }
+      },
+      [onOpenChange, onOverlayClick, persistent]
+    );
+
     if (!container) {
       return;
     }
@@ -211,6 +225,7 @@ export const ModalInner = forwardRef<HTMLDivElement, ModalProps>(
             style={{
               ...overlayStyle,
             }}
+            onClick={handleOverlayClick}
             {...otherOverlayOptions}
           />
           <div
diff --git a/tests/kit/utils/properties.ts b/tests/kit/utils/properties.ts
index 0cf43b57c8..efaa8211aa 100644
--- a/tests/kit/utils/properties.ts
+++ b/tests/kit/utils/properties.ts
@@ -126,10 +126,9 @@ export const addCustomProperty = async (
         })
         .locator('.selected')
     ).toBeVisible();
-    await page.keyboard.press('Escape', {
-      delay: 100,
-    });
+    await page.keyboard.press('Escape');
   }
+  await page.waitForTimeout(500);
 };
 
 export const expectPropertyOrdering = async (