Skip to content

Commit

Permalink
fix: resizing column action causes order change in BAITable (#2831)
Browse files Browse the repository at this point in the history
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
  • Loading branch information
yomybaby committed Nov 11, 2024
1 parent 5a12000 commit a888e3e
Showing 1 changed file with 20 additions and 3 deletions.
23 changes: 20 additions & 3 deletions react/src/components/BAITable.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { useDebounce } from 'ahooks';
import { GetProps, Table } from 'antd';
import { createStyles } from 'antd-style';
import { ColumnsType } from 'antd/es/table';
Expand Down Expand Up @@ -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(() => {
Expand Down Expand Up @@ -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>
);
};
Expand Down

0 comments on commit a888e3e

Please sign in to comment.