fix: don't prevent touchmove events inside the dialog (#164) (#166)

Author: tomivirkki

src/vaadin-dialog-draggable-mixin.html

@@ -40,15 +40,19 @@
       }
 
       _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;
           const isResizerContainerScrollbar = e.offsetX > resizerContainer.clientWidth || e.offsetY > resizerContainer.clientHeight;
           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});

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) {

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) {

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', () => {