Add touch support about re-flex

[smeijer]

Changing these lines in ReflexSplitter:L82:L85 to set the handler to non-passive, fixes the navigation issue.

this.document.addEventListener(
  'touchmove',
  this.onMouseMove,
  { passive: false } // added to fix the unwanted back / forward navigation
);

The warning I mentioned earlier is still thrown by some of the events; but it's no longer causing any issues. I do however think that some of the preventDefaults or stopPropagation aren't really necessary. Especially since they're already being ignored anyway.

[leefsmp]

Awesome! I fixed that in v 2.0.9 and removed preventDefault stopPropagation in mouse down event. Thanks.

[leefsmp]

There is already support for touch screens, this is done by tweaking the reflex-splitter style adding reflex-thin style. By default this style is activated for mobile platforms using the code in Browser.js. On your machine isMobile probably returns false and default style is applied. A simple workaround would be that you manually force reflex-thin on the splitter:

<ReflexSplitter className="reflex-thin">.

Alternatively you can take a look at reflex-styles.scss and overwrite the default style to suit your needs or add your styles in your own css class then applied it to the splitter as above using className.

[smeijer]

reflex-thin seems to help, but I guess there is a preventDefault missing? When dragging to the right, chrome starts to navigate to the previous page:

[leefsmp]

preventDefault is there, check the ReflexSplitter source.

I cannot reproduce this issue on my side, works fine in the mobile emulator as well as on iOS and Android... What platform/browser are you running that? And when does the navigation occur, is it on mouse move?

[smeijer]

It happens when the chrome flag overscroll-history-navigation is set to enabled. Disabling it fixes the behavior. Although it is an experimental function; I cannot remember that I've enabled it myself.

chrome://flags/#overscroll-history-navigation

Using Chrome 61.0.3163.59 on Windows 10.1703, both 64 bit.

The navigation occurs when dragging the splitter with the finger on the touch screen. The mouse (touchpad) is behaving as expected. It's because my device has both; a touchpad and a touchscreen.

[smeijer]

I'm guessing it has to do with the warning in my console:

ReflexSplitter.js? [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
onMouseMove @ ReflexSplitter.js?:134

https://www.chromestatus.com/features/5093566007214080

Treat Document Level Touch Event Listeners as Passive
DOM

AddEventListenerOptions defaults passive to false. With this change touchstart and touchmove listeners added to the document will default to passive:true (so that calls to preventDefault will be ignored)..

If the value is explicitly provided in the AddEventListenerOptions it will continue having the value specified by the page.

This is behind a flag starting in Chrome 54, and enabled by default in Chrome 56. See https://developers.google.com/web/updates/2017/01/scrolling-intervention

Seems related:

facebook/react#8968