fix: add touch cancel cleanup

Author: KevinVandy

packages/table-core/src/features/column-resizing/columnResizingFeature.utils.ts

@@ -263,17 +263,29 @@ export function header_getResizeHandler<
         return false
       },
       upHandler: (e: TouchEvent) => {
-        contextDocument?.removeEventListener(
-          'touchmove',
-          touchEvents.moveHandler,
-        )
-        contextDocument?.removeEventListener('touchend', touchEvents.upHandler)
+        removeTouchEvents()
         if (e.cancelable) {
           e.preventDefault()
           e.stopPropagation()
         }
         onEnd(e.touches[0]?.clientX)
       },
+      // the browser fires touchcancel instead of touchend when it takes over
+      // the gesture (system gesture, scroll takeover, tab switch); without
+      // this the non-passive touchmove listener stays on the document forever
+      cancelHandler: () => {
+        removeTouchEvents()
+        onEnd()
+      },
+    }
+
+    const removeTouchEvents = () => {
+      contextDocument?.removeEventListener('touchmove', touchEvents.moveHandler)
+      contextDocument?.removeEventListener('touchend', touchEvents.upHandler)
+      contextDocument?.removeEventListener(
+        'touchcancel',
+        touchEvents.cancelHandler,
+      )
     }
 
     const passiveIfSupported = passiveEventSupported()
@@ -291,6 +303,11 @@ export function header_getResizeHandler<
         touchEvents.upHandler,
         passiveIfSupported,
       )
+      contextDocument?.addEventListener(
+        'touchcancel',
+        touchEvents.cancelHandler,
+        passiveIfSupported,
+      )
     } else {
       contextDocument?.addEventListener(
         'mousemove',

packages/table-core/tests/unit/features/column-resizing/columnResizingFeature.utils.test.ts

@@ -582,6 +582,56 @@ describe('header_getResizeHandler', () => {
 
     removeEventListenerSpy.mockRestore()
   })
+
+  it('should cleanup event listeners and reset state on touchcancel', () => {
+    const removeEventListenerSpy = vi.spyOn(document, 'removeEventListener')
+    const table = makeTable(1, {
+      columnResizeMode: 'onChange',
+    })
+    const sizingUpdates: Array<Record<string, number>> = []
+    table.options.onColumnSizingChange = (updater) => {
+      sizingUpdates.push(
+        typeof updater === 'function'
+          ? updater(table.atoms.columnSizing.get())
+          : updater,
+      )
+    }
+
+    const header = createTestResizeHeader(table)
+    const handler = header_getResizeHandler(header as any, document)
+    handler({ type: 'touchstart', touches: [{ clientX: 100 }] })
+
+    document.dispatchEvent(
+      Object.assign(new Event('touchmove'), { touches: [{ clientX: 150 }] }),
+    )
+    expect(sizingUpdates).toHaveLength(1)
+
+    removeEventListenerSpy.mockClear()
+    document.dispatchEvent(new Event('touchcancel'))
+
+    expect(removeEventListenerSpy).toHaveBeenCalledWith(
+      'touchmove',
+      expect.any(Function),
+    )
+    expect(removeEventListenerSpy).toHaveBeenCalledWith(
+      'touchend',
+      expect.any(Function),
+    )
+    expect(removeEventListenerSpy).toHaveBeenCalledWith(
+      'touchcancel',
+      expect.any(Function),
+    )
+    expect(table.atoms.columnResizing.get().isResizingColumn).toBe(false)
+
+    // cancel commits at the last observed position, then moves are ignored
+    const updatesAfterCancel = sizingUpdates.length
+    document.dispatchEvent(
+      Object.assign(new Event('touchmove'), { touches: [{ clientX: 300 }] }),
+    )
+    expect(sizingUpdates).toHaveLength(updatesAfterCancel)
+
+    removeEventListenerSpy.mockRestore()
+  })
 })
 
 describe('passiveEventSupported', () => {