From 6571ec2df6112a2955488de58de5c31c956772b4 Mon Sep 17 00:00:00 2001
From: Qi <474021214@qq.com>
Date: Thu, 13 Apr 2023 20:58:22 +0800
Subject: [PATCH] fix: pinboard operation menu disappear inexplicably when
 hover to menu from button, fixed #1898 (#1922)

---
 .../pinboard-render/OperationButton.tsx        | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/affine/pinboard/pinboard-render/OperationButton.tsx b/apps/web/src/components/affine/pinboard/pinboard-render/OperationButton.tsx
index 0a97b4c385..b15b5880dd 100644
--- a/apps/web/src/components/affine/pinboard/pinboard-render/OperationButton.tsx
+++ b/apps/web/src/components/affine/pinboard/pinboard-render/OperationButton.tsx
@@ -8,7 +8,7 @@ import {
 } from '@blocksuite/icons';
 import type { PageMeta } from '@blocksuite/store';
 import { useTheme } from '@mui/material';
-import { useMemo, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 
 import { useMetaHelper } from '../../../../hooks/affine/use-meta-helper';
 import type { BlockSuiteWorkspace } from '../../../../shared';
@@ -44,6 +44,7 @@ export const OperationButton = ({
   } = useTheme();
   const { t } = useTranslation();
 
+  const timer = useRef<ReturnType<typeof setTimeout>>();
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [operationMenuOpen, setOperationMenuOpen] = useState(false);
   const [pinboardMenuOpen, setPinboardMenuOpen] = useState(false);
@@ -58,7 +59,20 @@ export const OperationButton = ({
         setPinboardMenuOpen(false);
       }}
     >
-      <div>
+      <div
+        onClick={e => {
+          e.stopPropagation();
+        }}
+        onMouseLeave={() => {
+          timer.current = setTimeout(() => {
+            setOperationMenuOpen(false);
+            setPinboardMenuOpen(false);
+          }, 150);
+        }}
+        onMouseEnter={() => {
+          clearTimeout(timer.current);
+        }}
+      >
         <StyledOperationButton
           data-testid="pinboard-operation-button"
           ref={ref => setAnchorEl(ref)}