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 = (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) => { 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 = (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) => { e.stopPropagation();