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

2 files changed, 6 insertions, 2 deletions

diff --git a/js/src/carousel.js b/js/src/carousel.js
index 3a9c4a47c..1a185d037 100644
--- 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 02a0c8a77..f92d87c61 100644
--- 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()