diff --git a/packages/react-aria-components/src/Table.tsx b/packages/react-aria-components/src/Table.tsx
index e020e0369ba..a4953a7eee0 100644
--- a/packages/react-aria-components/src/Table.tsx
+++ b/packages/react-aria-components/src/Table.tsx
@@ -1380,6 +1380,8 @@ export const ColumnResizer = forwardRef(function ColumnResizer(
let DOMProps = filterDOMProps(props, {global: true});
+ // Cursor overlay is used to style the cursor against the entire screen.
+ // Do not turn off pointer events or the cursor will no longer be styled.
return (
,
+
,
document.body
)}
diff --git a/packages/react-aria-components/test/Table.test.js b/packages/react-aria-components/test/Table.test.js
index 1ab33d14ad9..dde43b16b4f 100644
--- a/packages/react-aria-components/test/Table.test.js
+++ b/packages/react-aria-components/test/Table.test.js
@@ -17,6 +17,7 @@ import {
mockClickDefault,
pointerMap,
render,
+ screen,
setupIntersectionObserverMock,
triggerLongPress,
within
@@ -1837,6 +1838,31 @@ describe('Table', () => {
let resizers = getAllByTestId('resizer');
expect(resizers).toHaveLength(5);
});
+
+ describe('clicking directly on the resizer, no movement', () => {
+ installPointerEvent();
+ it('should end resize when clicking directly on the resizer, no movement', async () => {
+ let {getAllByTestId} = render();
+ act(() => {
+ setInteractionModality('pointer');
+ });
+ let resizer = getAllByTestId('resizer')[0];
+ fireEvent.pointerDown(resizer, {pointerType: 'mouse', pointerId: 1, pageX: 0, pageY: 30});
+ expect(resizer).toHaveAttribute('data-resizing', 'true');
+ // Fire events against the cursor overlay. It can't be pointer events none otherwise
+ // it will stop styling the cursor against the entire screen.
+ let cursorOverlay = screen.getByTestId('cursor-overlay');
+ fireEvent.pointerUp(cursorOverlay, {
+ pointerType: 'mouse',
+ pointerId: 1,
+ pageX: 0,
+ pageY: 30
+ });
+ fireEvent.click(cursorOverlay);
+ act(() => jest.runAllTimers());
+ expect(resizer).not.toHaveAttribute('data-resizing', 'true');
+ });
+ });
});
it('should support overriding table style', () => {
diff --git a/packages/react-aria/src/table/useTableColumnResize.ts b/packages/react-aria/src/table/useTableColumnResize.ts
index c74b6baf965..30f9d61a550 100644
--- a/packages/react-aria/src/table/useTableColumnResize.ts
+++ b/packages/react-aria/src/table/useTableColumnResize.ts
@@ -294,6 +294,11 @@ export function useTableColumnResize(
) {
endResize(item);
}
+ },
+ onPressEnd: () => {
+ if (state.resizingColumn != null) {
+ endResize(item);
+ }
}
});
let {visuallyHiddenProps} = useVisuallyHidden();