From 51f010dc79a79b2cae90f1d4c6399958068ef353 Mon Sep 17 00:00:00 2001
From: Tomi Virkki <tomivirkki@users.noreply.github.com>
Date: Tue, 16 Jun 2020 11:38:26 +0300
Subject: [PATCH] fix: don't prevent touchmove events inside the dialog (#164)
 (#166)

---
 src/vaadin-dialog-draggable-mixin.html           | 11 +++++++----
 src/vaadin-dialog-resizable-mixin.html           |  8 ++++++--
 src/vaadin-dialog.html                           |  9 ---------
 test/vaadin-dialog_draggable-resizable-test.html |  8 ++++----
 4 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/src/vaadin-dialog-draggable-mixin.html b/src/vaadin-dialog-draggable-mixin.html
index 2ff1041..202714d 100644
--- a/src/vaadin-dialog-draggable-mixin.html
+++ b/src/vaadin-dialog-draggable-mixin.html
@@ -40,6 +40,11 @@
       }
 
       _startDrag(e) {
+        // Don't initiate when there's more than 1 touch (pinch zoom)
+        if (e.type === 'touchstart' && e.touches.length > 1) {
+          return;
+        }
+
         if (this.draggable && (e.button === 0 || e.touches)) {
           const resizerContainer = this.$.overlay.$.resizerContainer;
           const isResizerContainer = e.target === resizerContainer;
@@ -47,8 +52,7 @@
           const isContentPart = e.target === this.$.overlay.$.content;
           const isDraggable = e.target.classList.contains('draggable');
           if ((isResizerContainer && !isResizerContainerScrollbar) || isContentPart || isDraggable) {
-            // Is needed to prevent text selection in Safari
-            !this._touchDevice && !isDraggable && e.preventDefault();
+            !isDraggable && e.preventDefault();
             this._originalBounds = this._getOverlayBounds();
             const event = this.__getMouseOrFirstTouchEvent(e);
             this._originalMouseCoords = {top: event.pageY, left: event.pageX};
@@ -65,8 +69,7 @@
 
       _drag(e) {
         const event = this.__getMouseOrFirstTouchEvent(e);
-        if (this._eventInWindow(event) &&
-          (e.type !== 'touchmove' || e.type === 'touchmove' && e.touches.length < 2)) {
+        if (this._eventInWindow(event)) {
           const top = this._originalBounds.top + (event.pageY - this._originalMouseCoords.top);
           const left = this._originalBounds.left + (event.pageX - this._originalMouseCoords.left);
           this._setBounds({top, left});
diff --git a/src/vaadin-dialog-resizable-mixin.html b/src/vaadin-dialog-resizable-mixin.html
index 1858deb..e2c7fe5 100644
--- a/src/vaadin-dialog-resizable-mixin.html
+++ b/src/vaadin-dialog-resizable-mixin.html
@@ -132,6 +132,11 @@
       }
 
       _startResize(e, direction) {
+        // Don't initiate when there's more than 1 touch (pinch zoom)
+        if (e.type === 'touchstart' && e.touches.length > 1) {
+          return;
+        }
+
         if (e.button === 0 || e.touches) {
           e.preventDefault();
           this._originalBounds = this._getOverlayBounds();
@@ -149,8 +154,7 @@
 
       _resize(e, resizer) {
         const event = this.__getMouseOrFirstTouchEvent(e);
-        if (this._eventInWindow(event) &&
-          (e.type !== 'touchmove' || e.type === 'touchmove' && e.touches.length < 2)) {
+        if (this._eventInWindow(event)) {
           const minimumSize = 40;
           resizer.split('').forEach((direction) => {
             switch (direction) {
diff --git a/src/vaadin-dialog.html b/src/vaadin-dialog.html
index e765d57..a126409 100644
--- a/src/vaadin-dialog.html
+++ b/src/vaadin-dialog.html
@@ -277,15 +277,6 @@
           this._observer = new Polymer.FlattenedNodesObserver(this, info => {
             this._setTemplateFromNodes(info.addedNodes);
           });
-
-          // We need to prevent dragging behind the non-draggable content of the dialog (i.e slotted text / button)
-          this.$.overlay.$.content.addEventListener('touchmove', this._preventMove, {passive: false});
-        }
-
-        _preventMove(e) {
-          if (e.touches.length < 2) {
-            e.preventDefault();
-          }
         }
 
         _setTemplateFromNodes(nodes) {
diff --git a/test/vaadin-dialog_draggable-resizable-test.html b/test/vaadin-dialog_draggable-resizable-test.html
index 3e1b672..987980e 100644
--- a/test/vaadin-dialog_draggable-resizable-test.html
+++ b/test/vaadin-dialog_draggable-resizable-test.html
@@ -512,7 +512,7 @@
             y: Math.floor(bounds.top + (bounds.height / 2))
           };
           const toXY = {x: fromXY.x + dx, y: fromXY.y + dx};
-          dispatchTouchEvent(target, 'touchstart', fromXY);
+          dispatchTouchEvent(target, 'touchstart', fromXY, multitouch);
           dispatchTouchEvent(target, 'touchmove', toXY, multitouch);
           dispatchTouchEvent(target, 'touchend', toXY);
         }
@@ -525,7 +525,7 @@
           };
 
           const toXY = {x: fromXY.x + dx, y: fromXY.y + dy};
-          dispatchTouchEvent(target, 'touchstart', fromXY);
+          dispatchTouchEvent(target, 'touchstart', fromXY, multitouch);
           dispatchTouchEvent(target, 'touchmove', toXY, multitouch);
           dispatchTouchEvent(target, 'touchend', toXY);
         }
@@ -558,9 +558,9 @@
           expect(e.defaultPrevented).to.be.true;
         });
 
-        it('should prevent default of the touchmove when dragged', () => {
+        it('should not prevent default of the touchmove events', () => {
           const e = dispatchTouchEvent(draggableOverlay.$.content, 'touchmove');
-          expect(e.defaultPrevented).to.be.true;
+          expect(e.defaultPrevented).to.be.false;
         });
 
         it('should bring to front on touch start', () => {