Multiple input devices problem in scrollView #9937
Description
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.
- Create app with ionicScroll.
- Load app to chrome with touch device mode. (ionic determine input device as touch device and disable scrolling with mouse)
- Toggle off touch device mode.
- You can not scroll with mouse.
Reversal pattern goes well:
- Create app with ionicScroll.
- Load app to chrome with normal mode. (ionic determine input device as mouse and disable scrolling with touch panel)
- Toggle on touch device mode.
- 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