From 5e4b032aca9bb65cf29699e70e58bf41d1d2b873 Mon Sep 17 00:00:00 2001 From: Rob Snow Date: Mon, 11 May 2026 14:34:15 +1000 Subject: [PATCH 1/4] fix: table resizing click stuck --- packages/react-aria-components/src/Table.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-aria-components/src/Table.tsx b/packages/react-aria-components/src/Table.tsx index e020e0369ba..7bb0508ef47 100644 --- a/packages/react-aria-components/src/Table.tsx +++ b/packages/react-aria-components/src/Table.tsx @@ -1395,7 +1395,7 @@ export const ColumnResizer = forwardRef(function ColumnResizer( {isResizing && isMouseDown && ReactDOM.createPortal( -
, +
, document.body )} From 7fb76560f639a9cf1d490e9f452ab40d638d3d46 Mon Sep 17 00:00:00 2001 From: Rob Snow Date: Mon, 11 May 2026 14:48:51 +1000 Subject: [PATCH 2/4] fix cursor styles --- packages/react-aria-components/src/Table.tsx | 5 ++++- .../react-aria-components/test/Table.test.js | 21 +++++++++++++++++++ .../src/table/useTableColumnResize.ts | 5 +++++ 3 files changed, 30 insertions(+), 1 deletion(-) diff --git a/packages/react-aria-components/src/Table.tsx b/packages/react-aria-components/src/Table.tsx index 7bb0508ef47..1501347fa59 100644 --- a/packages/react-aria-components/src/Table.tsx +++ b/packages/react-aria-components/src/Table.tsx @@ -1379,7 +1379,10 @@ 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..5721d53039b 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,26 @@ 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, debug} = 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..686f1d60221 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: e => { + if (state.resizingColumn != null) { + endResize(item); + } } }); let {visuallyHiddenProps} = useVisuallyHidden(); From f896a2cb7b0402071a8ecf36cc868ee3a55c39c2 Mon Sep 17 00:00:00 2001 From: Rob Snow Date: Mon, 11 May 2026 14:58:34 +1000 Subject: [PATCH 3/4] fix formatting --- packages/react-aria-components/src/Table.tsx | 6 ++++-- packages/react-aria-components/test/Table.test.js | 7 ++++++- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/react-aria-components/src/Table.tsx b/packages/react-aria-components/src/Table.tsx index 1501347fa59..a4953a7eee0 100644 --- a/packages/react-aria-components/src/Table.tsx +++ b/packages/react-aria-components/src/Table.tsx @@ -1379,7 +1379,6 @@ 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. @@ -1398,7 +1397,10 @@ export const ColumnResizer = forwardRef(function ColumnResizer( {isResizing && isMouseDown && ReactDOM.createPortal( -
, +
, document.body )} diff --git a/packages/react-aria-components/test/Table.test.js b/packages/react-aria-components/test/Table.test.js index 5721d53039b..92132dd4f95 100644 --- a/packages/react-aria-components/test/Table.test.js +++ b/packages/react-aria-components/test/Table.test.js @@ -1852,7 +1852,12 @@ describe('Table', () => { // 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.pointerUp(cursorOverlay, { + pointerType: 'mouse', + pointerId: 1, + pageX: 0, + pageY: 30 + }); fireEvent.click(cursorOverlay); act(() => jest.runAllTimers()); expect(resizer).not.toHaveAttribute('data-resizing', 'true'); From 609aec6e3db62b3f689a788f8900b4cabdad62d7 Mon Sep 17 00:00:00 2001 From: Rob Snow Date: Mon, 11 May 2026 15:00:09 +1000 Subject: [PATCH 4/4] fix lint --- packages/react-aria-components/test/Table.test.js | 2 +- packages/react-aria/src/table/useTableColumnResize.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-aria-components/test/Table.test.js b/packages/react-aria-components/test/Table.test.js index 92132dd4f95..dde43b16b4f 100644 --- a/packages/react-aria-components/test/Table.test.js +++ b/packages/react-aria-components/test/Table.test.js @@ -1842,7 +1842,7 @@ describe('Table', () => { describe('clicking directly on the resizer, no movement', () => { installPointerEvent(); it('should end resize when clicking directly on the resizer, no movement', async () => { - let {getAllByTestId, debug} = render(); + let {getAllByTestId} = render(); act(() => { setInteractionModality('pointer'); }); diff --git a/packages/react-aria/src/table/useTableColumnResize.ts b/packages/react-aria/src/table/useTableColumnResize.ts index 686f1d60221..30f9d61a550 100644 --- a/packages/react-aria/src/table/useTableColumnResize.ts +++ b/packages/react-aria/src/table/useTableColumnResize.ts @@ -295,7 +295,7 @@ export function useTableColumnResize( endResize(item); } }, - onPressEnd: e => { + onPressEnd: () => { if (state.resizingColumn != null) { endResize(item); }