diff --git a/web/app/components/workflow/__tests__/selection-contextmenu.spec.tsx b/web/app/components/workflow/__tests__/selection-contextmenu.spec.tsx
index efa6e2abbb..a52f9b17d3 100644
--- a/web/app/components/workflow/__tests__/selection-contextmenu.spec.tsx
+++ b/web/app/components/workflow/__tests__/selection-contextmenu.spec.tsx
@@ -25,7 +25,7 @@ vi.mock('@/next/navigation', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/ui/toast', () => ({
+vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: {
     success: (...args: unknown[]) => mockToastSuccess(...args),
     error: (...args: unknown[]) => mockToastError(...args),
@@ -39,13 +39,19 @@ vi.mock('@/service/use-snippets', () => ({
   }),
 }))
 
-vi.mock('@/service/client', () => ({
-  consoleClient: {
-    snippets: {
-      syncDraftWorkflow: (...args: unknown[]) => mockSyncDraftWorkflow(...args),
+vi.mock('@/service/client', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/service/client')>()
+  return {
+    ...actual,
+    consoleClient: {
+      ...actual.consoleClient,
+      snippets: {
+        ...actual.consoleClient.snippets,
+        syncDraftWorkflow: (...args: unknown[]) => mockSyncDraftWorkflow(...args),
+      },
     },
-  },
-}))
+  }
+})
 
 vi.mock('../hooks', async () => {
   const actual = await vi.importActual<typeof import('../hooks')>('../hooks')
@@ -301,6 +307,8 @@ describe('SelectionContextmenu', () => {
     })
 
     fireEvent.click(screen.getByTestId('selection-contextmenu-item-createSnippet'))
+    expect(store.getState().selectionMenu).toBeUndefined()
+    expect(screen.queryByTestId('selection-contextmenu-item-createSnippet')).not.toBeInTheDocument()
     fireEvent.change(screen.getByPlaceholderText('workflow.snippet.namePlaceholder'), {
       target: { value: 'My snippet' },
     })
diff --git a/web/app/components/workflow/selection-contextmenu.tsx b/web/app/components/workflow/selection-contextmenu.tsx
index 17e3904b8e..35e01f34d2 100644
--- a/web/app/components/workflow/selection-contextmenu.tsx
+++ b/web/app/components/workflow/selection-contextmenu.tsx
@@ -335,6 +335,7 @@ const SelectionContextmenu = () => {
       }),
     }
   }, [selectionMenu])
+  const isMenuOpen = Boolean(selectionMenu && anchor)
 
   useEffect(() => {
     if (selectionMenu && selectedNodes.length <= 1)
@@ -561,57 +562,59 @@ const SelectionContextmenu = () => {
   return (
     <div data-testid="selection-contextmenu">
       <ContextMenu
-        open
+        open={isMenuOpen}
         onOpenChange={(open) => {
           if (!open)
             handleSelectionContextmenuCancel()
         }}
       >
-        <ContextMenuContent
-          positionerProps={anchor ? { anchor } : undefined}
-          popupClassName="w-[240px] py-0"
-        >
-          <div className="p-1">
-            {menuActions.map(item => (
-              <ContextMenuItem
-                key={item.action}
-                data-testid={`selection-contextmenu-item-${item.action}`}
-                disabled={item.disabled}
-                className={cn(
-                  'mx-0 h-8 justify-between gap-3 rounded-lg px-2 text-[14px] leading-5 font-normal text-text-secondary',
-                  item.action === 'delete' && 'data-highlighted:bg-state-destructive-hover data-highlighted:text-text-destructive',
-                )}
-                onClick={() => handleMenuAction(item.action)}
-              >
-                <span>{getActionLabel(item.translationKey)}</span>
-                {item.shortcutKeys && (
-                  <ShortcutsName
-                    keys={item.shortcutKeys}
-                    textColor="secondary"
-                  />
-                )}
-              </ContextMenuItem>
-            ))}
-          </div>
-          <ContextMenuSeparator className="my-0" />
-          <div className="p-1.5">
-            <div className="flex items-center">
-              {alignMenuItems.map((item) => {
-                return (
-                  <ContextMenuItem
-                    key={item.alignType}
-                    aria-label={t(item.translationKey, { defaultValue: item.translationKey, ns: 'workflow' })}
-                    className="mx-0 h-8 w-8 justify-center rounded-md px-0 text-text-tertiary data-highlighted:bg-state-base-hover data-highlighted:text-text-secondary"
-                    data-testid={`selection-contextmenu-item-${item.alignType}`}
-                    onClick={() => handleAlignNodes(item.alignType)}
-                  >
-                    <span aria-hidden className={`${item.icon} h-4 w-4 ${item.iconClassName ?? ''}`.trim()} />
-                  </ContextMenuItem>
-                )
-              })}
+        {isMenuOpen && (
+          <ContextMenuContent
+            positionerProps={{ anchor }}
+            popupClassName="w-[240px] py-0"
+          >
+            <div className="p-1">
+              {menuActions.map(item => (
+                <ContextMenuItem
+                  key={item.action}
+                  data-testid={`selection-contextmenu-item-${item.action}`}
+                  disabled={item.disabled}
+                  className={cn(
+                    'mx-0 h-8 justify-between gap-3 rounded-lg px-2 text-[14px] leading-5 font-normal text-text-secondary',
+                    item.action === 'delete' && 'data-highlighted:bg-state-destructive-hover data-highlighted:text-text-destructive',
+                  )}
+                  onClick={() => handleMenuAction(item.action)}
+                >
+                  <span>{getActionLabel(item.translationKey)}</span>
+                  {item.shortcutKeys && (
+                    <ShortcutsName
+                      keys={item.shortcutKeys}
+                      textColor="secondary"
+                    />
+                  )}
+                </ContextMenuItem>
+              ))}
             </div>
-          </div>
-        </ContextMenuContent>
+            <ContextMenuSeparator className="my-0" />
+            <div className="p-1.5">
+              <div className="flex items-center">
+                {alignMenuItems.map((item) => {
+                  return (
+                    <ContextMenuItem
+                      key={item.alignType}
+                      aria-label={t(item.translationKey, { defaultValue: item.translationKey, ns: 'workflow' })}
+                      className="mx-0 h-8 w-8 justify-center rounded-md px-0 text-text-tertiary data-highlighted:bg-state-base-hover data-highlighted:text-text-secondary"
+                      data-testid={`selection-contextmenu-item-${item.alignType}`}
+                      onClick={() => handleAlignNodes(item.alignType)}
+                    >
+                      <span aria-hidden className={`${item.icon} h-4 w-4 ${item.iconClassName ?? ''}`.trim()} />
+                    </ContextMenuItem>
+                  )
+                })}
+              </div>
+            </div>
+          </ContextMenuContent>
+        )}
       </ContextMenu>
       {isCreateSnippetDialogOpen && (
         <CreateSnippetDialog