Multiple input devices problem in scrollView

[jgw96]

From @norami on January 10, 2017 16:22

Ionic version: (check one with "x") [x ] 1.x [] 2.x

I'm submitting a ... (check one with "x") [x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior: Some PCs enable multiple input devices. For example, Windows surface PCs enable both of touch device (physically screen) and mouse (physically touch panel or mouse). But ionic allow to use one kind of input device by the determination running on initialisation.

This leads very troubling behaviour. On windows surface PCs, user can click element with screen and touch panel while use cannot scroll element only with screen.

Expected behavior:

Like most applications, apps should enable multiple devices. In other words use should be able to use both of mouse (including touch panel) and touch device (screen of tablet).

Steps to reproduce:

With chrome debugger, you can reproduce easily this problem.

1. Create app with ionicScroll.
2. Load app to chrome with touch device mode. (ionic determine input device as touch device and disable scrolling with mouse)
3. Toggle off touch device mode.
4. You can not scroll with mouse.

Reversal pattern goes well:

1. Create app with ionicScroll.
2. Load app to chrome with normal mode. (ionic determine input device as mouse and disable scrolling with touch panel)
3. Toggle on touch device mode.
4. You can not scroll with touch panel.

Related code:

I can use a monkey patch code shown in the lines below. This seems to work without any problem.

    if ('ontouchstart' in window) {
      // Touch Events
      container.addEventListener("touchstart", self.touchStart, false);
      if(self.options.preventDefault) container.addEventListener("touchmove", self.touchMoveBubble, false);
      document.addEventListener("touchmove", self.touchMove, false);
      document.addEventListener("touchend", self.touchEnd, false);
      document.addEventListener("touchcancel", self.touchEnd, false);

    }
    if (window.navigator.pointerEnabled) {
      // Pointer Events
      container.addEventListener("pointerdown", self.touchStart, false);
      if(self.options.preventDefault) container.addEventListener("pointermove", self.touchMoveBubble, false);
      document.addEventListener("pointermove", self.touchMove, false);
      document.addEventListener("pointerup", self.touchEnd, false);
      document.addEventListener("pointercancel", self.touchEnd, false);

    }
    if (window.navigator.msPointerEnabled) {
      // IE10, WP8 (Pointer Events)
      container.addEventListener("MSPointerDown", self.touchStart, false);
      if(self.options.preventDefault) container.addEventListener("MSPointerMove", self.touchMoveBubble, false);
      document.addEventListener("MSPointerMove", self.touchMove, false);
      document.addEventListener("MSPointerUp", self.touchEnd, false);
      document.addEventListener("MSPointerCancel", self.touchEnd, false);
    }
    if ('onmousedown' in window) {
      // Mouse Events
      var mousedown = false;

      // omitted  

      container.addEventListener("mousedown", self.mouseDown, false);
      if(self.options.preventDefault) container.addEventListener("mousemove", self.mouseMoveBubble, false);
      document.addEventListener("mousemove", self.mouseMove, false);
      document.addEventListener("mouseup", self.mouseUp, false);
      document.addEventListener('mousewheel', self.mouseWheel, false);
    }
    if ('onwheel' in window) {
      document.addEventListener('wheel', self.mouseWheel, false);
    }

original code is line 5380 of: https://github.com/driftyco/ionic/blob/fded25c17864ac9bc37aedd9c1abf2295f4dca03/release/js/ionic.js

Copied from original issue: driftyco/ionic#9937

[jgw96]

From @norami on January 10, 2017 16:41

By some investigation, I found that this problem is specific to scrollView.js. https://github.com/driftyco/ionic/blob/1.x/js/views/scrollView.js

In sliderView.js and tap.js the combination use of both of mouse and touch device is explicitly allowed. https://github.com/driftyco/ionic/blob/1.x/js/views/sliderView.js https://github.com/driftyco/ionic/blob/1.x/js/utils/tap.js

Behaviour of scrollView.js seems to be not preferable in the point of standardization of code.

[jgw96]

From @norami on January 10, 2017 17:11

More simple and standardized solution is shown in the commit above.

[norami]

I seemed to send PR to a wrong repository. Thank you for migration.