Touch support in FDT v2 is wonky.
There's multiple issues here:
problem 1
We're no longer passing down the touchEnabled prop to the cell renderers within FDT.
But the resizer plugin <ResizeCell /> still expects it, making it not work for touch devices.
problem 2
The touch/mouse related event listeners were treated as passive.
This is a problem with React not yet having an API for clients to specify event listener options.
FDT relies on stopping propagation or preventing default behavior of these events in various places, and they did not work as expected.
I'm fixing this by manually registering the handlers via addEventListener with the passive property turned OFF.
See facebook/react#6436
problem 3
Sometimes, the first touch events don't seem to work unless the user does a follow-up click.
One particular case is when the user clicks on the reorder knob; FDT will render a "drag proxy" which replaces the original cell thus making the original touch event (which relies on the original cell to be in the document tree) to not work properly.
The read-only target property of the Touch interface returns the (EventTarget) on which the touch contact started when it was first placed on the surface, even if the touch point has since moved outside the interactive area of that element or even been removed from the document. Note that if the target element is removed from the document, events will still be targeted at it, and hence won't necessarily bubble up to the window or document anymore. If there is any risk of an element being removed while it is being touched, the best practice is to attach the touch listeners directly to the target.
problem 4
<ReorderCell /> accidentally renders the children twice in some cases because we accidentally passed its' children to its child renderer...
Check this comment for details.
Description
Touch support in FDT v2 is wonky. There's multiple issues here:
problem 1
We're no longer passing down the
touchEnabled
prop to the cell renderers within FDT. But the resizer plugin<ResizeCell />
still expects it, making it not work for touch devices.problem 2
The touch/mouse related event listeners were treated as passive. This is a problem with React not yet having an API for clients to specify event listener options.
FDT relies on stopping propagation or preventing default behavior of these events in various places, and they did not work as expected. I'm fixing this by manually registering the handlers via
addEventListener
with thepassive
property turned OFF. See facebook/react#6436problem 3
Sometimes, the first touch events don't seem to work unless the user does a follow-up click. One particular case is when the user clicks on the reorder knob; FDT will render a "drag proxy" which replaces the original cell thus making the original touch event (which relies on the original cell to be in the document tree) to not work properly.
The docs explain this nicely: https://developer.mozilla.org/en-US/docs/Web/API/Touch/target
problem 4
<ReorderCell />
accidentally renders the children twice in some cases because we accidentally passed its' children to its child renderer... Check this comment for details.Motivation and Context
Fixes #705
How Has This Been Tested?
Tested with local examples, and also on codesandbox: https://codesandbox.io/s/fixed-data-table-2-touch-resizing-s22nn7 TODO: Test within LiveDesign
Screenshots (if appropriate):
Types of changes
Checklist: