From 2207c19db0b021afa53e893d5c71fd7982f60a61 Mon Sep 17 00:00:00 2001 From: eugeniykiyashko Date: Tue, 5 May 2020 20:17:43 +0300 Subject: [PATCH 1/4] ScrollView - The scrolling operation is interrupted on touch devices (T886654) --- js/ui/overlay/ui.overlay.js | 2 +- .../DevExpress.ui.widgets/overlay.tests.js | 46 +++++++++++++++++++ 2 files changed, 47 insertions(+), 1 deletion(-) diff --git a/js/ui/overlay/ui.overlay.js b/js/ui/overlay/ui.overlay.js index 9449982defa4..690a39b03750 100644 --- a/js/ui/overlay/ui.overlay.js +++ b/js/ui/overlay/ui.overlay.js @@ -999,7 +999,7 @@ const 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 index 2b807ac0bbda..f3e6376a26f4 100644 --- a/testing/tests/DevExpress.ui.widgets/overlay.tests.js +++ b/testing/tests/DevExpress.ui.widgets/overlay.tests.js @@ -3554,6 +3554,52 @@ 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 = $('
'); + + $overlay.dxOverlay('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.TEST', { + getDirection: function() { return 'both'; }, + validate: function(e) { + e.cancelable = false; + return true; + } + }, function(e) { + assert.strictEqual(e.isDefaultPrevented(), false, 'event should not be prevented'); + }); + + $($overlayWrapper.parent()).on('dxdrag.TEST', { + getDirection: function() { return 'both'; }, + validate: function() { return true; } + }, function() { + assert.ok(false, 'event should not be fired'); + }); + + pointerMock($scrollable.find('.dx-scrollable-container')) + .start() + .wheel(10); + + $overlayWrapper + .off('.TEST') + .parent() + .off('.TEST'); + }); + test('scroll event does not prevent gestures', function(assert) { const $gestureCover = $('.dx-gesture-cover'); const originalPointerEvents = $gestureCover.css('pointerEvents'); From 681b659a66e744bc334c86acfbf6d2fd9c67387d Mon Sep 17 00:00:00 2001 From: eugeniykiyashko Date: Tue, 5 May 2020 23:35:10 +0300 Subject: [PATCH 2/4] refactor --- testing/tests/DevExpress.ui.widgets/overlay.tests.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/testing/tests/DevExpress.ui.widgets/overlay.tests.js b/testing/tests/DevExpress.ui.widgets/overlay.tests.js index f3e6376a26f4..35bd932eaf2d 100644 --- a/testing/tests/DevExpress.ui.widgets/overlay.tests.js +++ b/testing/tests/DevExpress.ui.widgets/overlay.tests.js @@ -3561,7 +3561,7 @@ testModule('scrollable interaction', { const $overlay = $($('#overlay').dxOverlay()); const $scrollable = $('
'); - $overlay.dxOverlay('option', 'visible', true); + $overlay.dxOverlay('instance').option('visible', true); const $content = $($overlay.dxOverlay('$content')).append($scrollable); $scrollable.dxScrollable({ From 8bd945fe135352fc37b1e3339e3717ba025d7e8e Mon Sep 17 00:00:00 2001 From: eugeniykiyashko Date: Wed, 6 May 2020 11:33:57 +0300 Subject: [PATCH 3/4] refactor --- .../DevExpress.ui.widgets/overlay.tests.js | 30 +++++++++---------- 1 file changed, 14 insertions(+), 16 deletions(-) diff --git a/testing/tests/DevExpress.ui.widgets/overlay.tests.js b/testing/tests/DevExpress.ui.widgets/overlay.tests.js index 35bd932eaf2d..6251acf47ee3 100644 --- a/testing/tests/DevExpress.ui.widgets/overlay.tests.js +++ b/testing/tests/DevExpress.ui.widgets/overlay.tests.js @@ -3573,31 +3573,29 @@ testModule('scrollable interaction', { const $overlayWrapper = $content.closest(toSelector(OVERLAY_WRAPPER_CLASS)); - $($overlayWrapper).on('dxdrag.TEST', { - getDirection: function() { return 'both'; }, - validate: function(e) { - e.cancelable = false; - return true; - } - }, function(e) { - assert.strictEqual(e.isDefaultPrevented(), false, 'event should not be prevented'); + $($overlayWrapper).on('dxdrag', { + getDirection: () => 'both', + validate: () => true + }, (e) => { + assert.strictEqual(e.isDefaultPrevented(), false, 'not cancelable event should not be prevented'); }); - $($overlayWrapper.parent()).on('dxdrag.TEST', { + + $($overlayWrapper.parent()).on('dxdrag', { getDirection: function() { return 'both'; }, validate: function() { return true; } }, function() { assert.ok(false, 'event should not be fired'); }); - pointerMock($scrollable.find('.dx-scrollable-container')) - .start() - .wheel(10); + const event = $.Event('dxdrag', { + cancelable: false, + originalEvent: $.Event('dxpointermove', { + originalEvent: $.Event('touchmove') + }) + }); - $overlayWrapper - .off('.TEST') - .parent() - .off('.TEST'); + $($overlayWrapper).trigger(event); }); test('scroll event does not prevent gestures', function(assert) { From 19be7ac48acf803b056a3bbc8b5386af72e91afa Mon Sep 17 00:00:00 2001 From: eugeniykiyashko Date: Wed, 6 May 2020 11:46:44 +0300 Subject: [PATCH 4/4] remove empty line --- testing/tests/DevExpress.ui.widgets/overlay.tests.js | 1 - 1 file changed, 1 deletion(-) diff --git a/testing/tests/DevExpress.ui.widgets/overlay.tests.js b/testing/tests/DevExpress.ui.widgets/overlay.tests.js index 6251acf47ee3..51746513cda4 100644 --- a/testing/tests/DevExpress.ui.widgets/overlay.tests.js +++ b/testing/tests/DevExpress.ui.widgets/overlay.tests.js @@ -3580,7 +3580,6 @@ testModule('scrollable interaction', { assert.strictEqual(e.isDefaultPrevented(), false, 'not cancelable event should not be prevented'); }); - $($overlayWrapper.parent()).on('dxdrag', { getDirection: function() { return 'both'; }, validate: function() { return true; }