From a5ac3d184ea24420e9937a086625a80f4b2bfcf5 Mon Sep 17 00:00:00 2001
From: Bruno Ferreira <brunoferreira_@outlook.com>
Date: Tue, 10 Sep 2024 09:50:17 -0300
Subject: [PATCH] fix(list-slider): add touchmove listener to identifies move
 (#564)

Co-authored-by: Felipe Fialho <hi@felipefialho.com>
---
 .../components/list-slider/list-slider.tsx    | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/components/list-slider/list-slider.tsx b/packages/core/src/components/list-slider/list-slider.tsx
index 7352196f5..62e650c05 100644
--- a/packages/core/src/components/list-slider/list-slider.tsx
+++ b/packages/core/src/components/list-slider/list-slider.tsx
@@ -31,6 +31,7 @@ export class AtomListSlider {
   itemWidth = 0
   touchStartX = 0
   touchEndX = 0
+  isTouchMoved = false
   sliderGapValue = 0
   viewportWidth = 0
   maxTranslateX = 0
@@ -76,8 +77,15 @@ export class AtomListSlider {
     this.nextButton = this.element.shadowRoot.querySelector('.navigation--next')
     this.prevButton = this.element.shadowRoot.querySelector('.navigation--prev')
 
-    this.sliderWrapper.addEventListener('touchstart', this.handleTouchStart)
-    this.sliderWrapper.addEventListener('touchend', this.handleTouchEnd)
+    this.sliderWrapper.addEventListener('touchstart', (event) =>
+      this.handleTouchStart(event)
+    )
+    this.sliderWrapper.addEventListener('touchend', (event) =>
+      this.handleTouchEnd(event)
+    )
+    this.sliderWrapper.addEventListener('touchmove', () =>
+      this.handleTouchMove()
+    )
 
     const sliderGap = getComputedStyle(this.element).getPropertyValue(
       '--slider-gap'
@@ -97,8 +105,11 @@ export class AtomListSlider {
   }
 
   disconnectedCallback() {
+    if (!this.sliderWrapper) return
+
     this.sliderWrapper.removeEventListener('touchstart', this.handleTouchStart)
     this.sliderWrapper.removeEventListener('touchend', this.handleTouchEnd)
+    this.sliderWrapper.removeEventListener('touchmove', this.handleTouchMove)
     window.removeEventListener('resize', this.handleOnResize)
   }
 
@@ -205,6 +216,7 @@ export class AtomListSlider {
   }
 
   handleTouchStart = (event: TouchEvent) => {
+    this.isTouchMoved = false
     this.touchStartX = event.touches[0].clientX
   }
 
@@ -213,7 +225,13 @@ export class AtomListSlider {
     this.handleSwipe()
   }
 
+  handleTouchMove = () => {
+    this.isTouchMoved = true
+  }
+
   handleSwipe = () => {
+    if (!this.isTouchMoved) return
+
     const lastIndex = this.sliderItems.length - 1
     const isSwipeLeft = this.touchEndX < this.touchStartX