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 36176dd9c029ddcc2a55eb7cfe164a944a6196c9..8aeb9e038844c98863d77a5458c1d29544ced06f 100644 (file)
--- a/js/src/carousel.js
+++ b/js/src/carousel.js
@@ -245,6 +245,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 0d2a0f327104f2fef5b3cea35f98db20c79f92d7..f769f67b7890f671cad1d0c5dc605d7df851e910 100644 (file)
--- a/js/tests/unit/carousel.js
+++ b/js/tests/unit/carousel.js
@@ -1118,7 +1118,7 @@ $(function () {
     }
 
     document.documentElement.ontouchstart = $.noop
-    assert.expect(3)
+    assert.expect(4)
     Simulator.setType('pointer')
 
     var $styles = $(stylesCarousel).appendTo('head')
@@ -1147,6 +1147,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()
@@ -1160,7 +1161,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
@@ -1190,6 +1191,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()