From c719d67f715437d523d453350ef5ebc18315bc47 Mon Sep 17 00:00:00 2001
From: Vipin Chaudhary <VipinChaudhary1809@gmail.com>
Date: Thu, 6 Nov 2025 18:58:23 +0530
Subject: [PATCH] [WIKI-714] fix: close drag handle dropdown when any key is
 pressed #8040

---
 .../plugins/drag-handles/column/drag-handle.tsx     | 13 ++++++++++++-
 .../table/plugins/drag-handles/row/drag-handle.tsx  | 13 ++++++++++++-
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/editor/src/core/extensions/table/plugins/drag-handles/column/drag-handle.tsx b/packages/editor/src/core/extensions/table/plugins/drag-handles/column/drag-handle.tsx
index b4322b238..b285de93a 100644
--- a/packages/editor/src/core/extensions/table/plugins/drag-handles/column/drag-handle.tsx
+++ b/packages/editor/src/core/extensions/table/plugins/drag-handles/column/drag-handle.tsx
@@ -12,7 +12,7 @@ import {
 } from "@floating-ui/react";
 import type { Editor } from "@tiptap/core";
 import { Ellipsis } from "lucide-react";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 // plane imports
 import { cn } from "@plane/utils";
 // constants
@@ -78,6 +78,17 @@ export const ColumnDragHandle: React.FC<ColumnDragHandleProps> = (props) => {
   const role = useRole(context);
   const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, click, role]);
 
+  useEffect(() => {
+    if (!isDropdownOpen) return;
+    const handleKeyDown = (event: KeyboardEvent) => {
+      context.onOpenChange(false);
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isDropdownOpen, context]);
+
   const handleMouseDown = useCallback(
     (e: React.MouseEvent<HTMLButtonElement>) => {
       e.stopPropagation();
diff --git a/packages/editor/src/core/extensions/table/plugins/drag-handles/row/drag-handle.tsx b/packages/editor/src/core/extensions/table/plugins/drag-handles/row/drag-handle.tsx
index d556e71bc..3aede2205 100644
--- a/packages/editor/src/core/extensions/table/plugins/drag-handles/row/drag-handle.tsx
+++ b/packages/editor/src/core/extensions/table/plugins/drag-handles/row/drag-handle.tsx
@@ -12,7 +12,7 @@ import {
 } from "@floating-ui/react";
 import type { Editor } from "@tiptap/core";
 import { Ellipsis } from "lucide-react";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 // plane imports
 import { cn } from "@plane/utils";
 // constants
@@ -78,6 +78,17 @@ export const RowDragHandle: React.FC<RowDragHandleProps> = (props) => {
   const role = useRole(context);
   const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, click, role]);
 
+  useEffect(() => {
+    if (!isDropdownOpen) return;
+    const handleKeyDown = (event: KeyboardEvent) => {
+      context.onOpenChange(false);
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isDropdownOpen, context]);
+
   const handleMouseDown = useCallback(
     (e: React.MouseEvent<HTMLButtonElement>) => {
       e.stopPropagation();