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 (