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();