fix: table resizing click stuck

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 (
     <dom.div
       ref={objectRef}
@@ -1395,7 +1397,10 @@ export const ColumnResizer = forwardRef(function ColumnResizer(
       {isResizing &&
         isMouseDown &&
         ReactDOM.createPortal(
-          <div style={{position: 'fixed', top: 0, left: 0, bottom: 0, right: 0, cursor}} />,
+          <div
+            style={{position: 'fixed', top: 0, left: 0, bottom: 0, right: 0, cursor}}
+            data-testid="cursor-overlay"
+          />,
           document.body
         )}
     </dom.div>

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(<ControlledResizableTable />);
+        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', () => {

packages/react-aria/src/table/useTableColumnResize.ts

@@ -294,6 +294,11 @@ export function useTableColumnResize<T>(
       ) {
         endResize(item);
       }
+    },
+    onPressEnd: () => {
+      if (state.resizingColumn != null) {
+        endResize(item);
+      }
     }
   });
   let {visuallyHiddenProps} = useVisuallyHidden();