Touch column resizing not working correctly in onEnd mode

[cjpmedius]

Describe the bug

When using touch screens, the column resizing behaviour does not work correctly when set to 'onEnd' mode.

After debugging this seems to be because the e.touches property is empty when react-table processes the 'touchend' event in this scenario. It appears from the event API that the touches data will exist in 'e.changedTouches' instead of 'e.touches' once the touch has finished (this also explains why it works in onChange mode, as the values are taken while the touch is still in progress and e.touches is therefore populated)

Tested on a touchscreen laptop using latest of both firefox and chrome and same issue. (Firefox won't even detect the initial touch start without enabling the legacy touch API setting dom.w3c_touch_events.legacy_apis.enabled, not sure what that is about...)

Code sandbox to reproduce seems unreliable, but is simply the react resize example with the column resize mode altered to 'onEnd'

Your minimal, reproducible example

https://codesandbox.io/s/quirky-estrela-bvzbek?file=/src/main.tsx

Steps to reproduce

Using touch screen, tap and hold resizer on column header, drag to resize then release.

Expected behavior

Column size is updated, as with mouse behaviour.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Windows 11, Chrome latest, firefox latest

react-table version

8.7.0

TypeScript version

4.2.4

Additional context

No response

Terms & Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[modiho]

I ran into this as well. Thank you for debugging this @cjpmedius. Based on your diagnosis, I am currently running with this workaround that monkey patches TouchEvent to alias touches to changedTouches:

const touchesProperty = Object.getOwnPropertyDescriptor(
  TouchEvent.prototype,
  "touches",
);
Object.defineProperty(TouchEvent.prototype, "touches", {
  ...touchesProperty,
  get() {
    if (this.type === "touchend") {
      return this.changedTouches;
    }
    return touchesProperty.get?.apply(this, []);
  },
});

(use at your own peril.)