ScrollView - The scrolling operation is interrupted on touch devices …

…(T886654) (#12917) (#12926)
DevExpress · May 6, 2020 · a6d1532 · a6d1532
1 parent 36a56c8
commit a6d1532
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 1 deletion.
diff --git a/js/ui/overlay/ui.overlay.js b/js/ui/overlay/ui.overlay.js
@@ -1003,7 +1003,7 @@ var Overlay = Widget.inherit({
             const originalEvent = e.originalEvent.originalEvent;
             e._cancelPreventDefault = true;
 
-            if(originalEvent && originalEvent.type !== 'mousemove') {
+            if(originalEvent && originalEvent.type !== 'mousemove' && e.cancelable !== false) {
                 e.preventDefault();
             }
         });

diff --git a/testing/tests/DevExpress.ui.widgets/overlay.tests.js b/testing/tests/DevExpress.ui.widgets/overlay.tests.js
@@ -3528,6 +3528,49 @@ testModule('scrollable interaction', {
             .off('.TEST');
     });
 
+    // T886654
+    test('Scroll event should not prevented on overlay that avoid the [Intervation] error when event is not cancelable', function(assert) {
+        assert.expect(1);
+
+        const $overlay = $($('#overlay').dxOverlay());
+        const $scrollable = $('<div>');
+
+        $overlay.dxOverlay('instance').option('visible', true);
+        const $content = $($overlay.dxOverlay('$content')).append($scrollable);
+
+        $scrollable.dxScrollable({
+            useNative: true,
+            bounceEnabled: false,
+            direction: 'vertical',
+            inertiaEnabled: false
+        });
+
+        const $overlayWrapper = $content.closest(toSelector(OVERLAY_WRAPPER_CLASS));
+
+        $($overlayWrapper).on('dxdrag', {
+            getDirection: () => 'both',
+            validate: () => true
+        }, (e) => {
+            assert.strictEqual(e.isDefaultPrevented(), false, 'not cancelable event should not be prevented');
+        });
+
+        $($overlayWrapper.parent()).on('dxdrag', {
+            getDirection: function() { return 'both'; },
+            validate: function() { return true; }
+        }, function() {
+            assert.ok(false, 'event should not be fired');
+        });
+
+        const event = $.Event('dxdrag', {
+            cancelable: false,
+            originalEvent: $.Event('dxpointermove', {
+                originalEvent: $.Event('touchmove')
+            })
+        });
+
+        $($overlayWrapper).trigger(event);
+    });
+
     test('scroll event does not prevent gestures', function(assert) {
         const $gestureCover = $('.dx-gesture-cover');
         const originalPointerEvents = $gestureCover.css('pointerEvents');