From a888e3ef7cf51726092eb637da4307beb1826732 Mon Sep 17 00:00:00 2001
From: yomybaby <621215+yomybaby@users.noreply.github.com>
Date: Mon, 11 Nov 2024 04:23:24 +0000
Subject: [PATCH] fix: resizing column action causes order change in BAITable
 (#2831)

Resolves #2830

Prevents column sorting when resizing columns in BAITable

This PR fixes an issue where users could accidentally trigger column sorting while resizing table columns. It adds a debounced resize state check that temporarily disables click events during and shortly after column resizing operations.

**Implementation details:**
- Added `isResizing` state to track when a column is being resized
- Implemented a 100ms debounced version of the resize state
- Modified click handler to prevent column sorting when resize is in progress
- Preserved original click behavior when not resizing
---
 react/src/components/BAITable.tsx | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/react/src/components/BAITable.tsx b/react/src/components/BAITable.tsx
index 6f055c07ba..17b7c5fdfc 100644
--- a/react/src/components/BAITable.tsx
+++ b/react/src/components/BAITable.tsx
@@ -1,3 +1,4 @@
+import { useDebounce } from 'ahooks';
 import { GetProps, Table } from 'antd';
 import { createStyles } from 'antd-style';
 import { ColumnsType } from 'antd/es/table';
@@ -34,9 +35,10 @@ const ResizableTitle = (
     width: number;
   },
 ) => {
-  const { onResize, width, ...restProps } = props;
-
+  const { onResize, width, onClick, ...restProps } = props;
   const wrapRef = useRef<HTMLTableCellElement>(null);
+  const [isResizing, setIsResizing] = useState(false);
+  const debouncedIsResizing = useDebounce(isResizing, { wait: 100 });
 
   // This is a workaround for the initial width of resizable columns if the width is not specified
   useEffect(() => {
@@ -67,9 +69,24 @@ const ResizableTitle = (
         />
       }
       onResize={onResize}
+      onResizeStart={() => {
+        setIsResizing(true);
+      }}
+      onResizeStop={() => {
+        setIsResizing(false);
+      }}
       draggableOpts={{ enableUserSelectHack: false }}
     >
-      <th {...restProps} />
+      <th
+        onClick={(e) => {
+          if (debouncedIsResizing) {
+            e.preventDefault();
+          } else {
+            onClick?.(e);
+          }
+        }}
+        {...restProps}
+      />
     </Resizable>
   );
 };