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 e58af08f63/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)

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,
       }}

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

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

tests/kit/utils/properties.ts

@@ -126,10 +126,9 @@ export const addCustomProperty = async (
         })
         .locator('.selected')
     ).toBeVisible();
-    await page.keyboard.press('Escape', {
+    await page.keyboard.press('Escape');
-      delay: 100,
-    });
   }
+  await page.waitForTimeout(500);
 };
 
 export const expectPropertyOrdering = async (