Reset carousel touch delta x to prevent click transformation in swipe (#28558)

diff --git a/js/src/carousel.js b/js/src/carousel.js
index 3a9c4a47cb0b5465c8b0e95bfecc15eb1e512bff..1a185d03785260a3b348504ec6b8ca8f3af4c99c 100644 (file)
--- a/js/src/carousel.js
+++ b/js/src/carousel.js
@@ -257,6 +257,8 @@ class Carousel {
 
     const direction = absDeltax / this.touchDeltaX
 
+    this.touchDeltaX = 0
+
     // swipe left
     if (direction > 0) {
       this.prev()

diff --git a/js/tests/unit/carousel.js b/js/tests/unit/carousel.js
index 02a0c8a777a1928581368ec9addbedecc0463b84..f92d87c6120bdf5d70c922b115b30a06dc690405 100644 (file)
--- a/js/tests/unit/carousel.js
+++ b/js/tests/unit/carousel.js
@@ -1153,7 +1153,7 @@ $(function () {
     }
 
     document.documentElement.ontouchstart = $.noop
-    assert.expect(3)
+    assert.expect(4)
     Simulator.setType('pointer')
 
     var $styles = $(stylesCarousel).appendTo('head')
@@ -1182,6 +1182,7 @@ $(function () {
       assert.ok(true, 'slid event fired')
       assert.ok(!$item.hasClass('active'))
       assert.ok(spy.called)
+      assert.strictEqual(carousel.touchDeltaX, 0)
       $styles.remove()
       delete document.documentElement.ontouchstart
       done()
@@ -1195,7 +1196,7 @@ $(function () {
   })
 
   QUnit.test('should allow swipeleft and call next with touch events', function (assert) {
-    assert.expect(3)
+    assert.expect(4)
     clearPointerEvents()
     Simulator.setType('touch')
     document.documentElement.ontouchstart = $.noop
@@ -1225,6 +1226,7 @@ $(function () {
       assert.ok(true, 'slid event fired')
       assert.ok(!$item.hasClass('active'))
       assert.ok(spy.called)
+      assert.strictEqual(carousel.touchDeltaX, 0)
       restorePointerEvents()
       delete document.documentElement.ontouchstart
       done()