fix(carousel): added delay to interacting state if carousel is moving (…

…#2033)
eBay · Dec 5, 2023 · 711ebe2 · 711ebe2
1 parent 9cffbaf
commit 711ebe2
Showing 1 changed file with 19 additions and 10 deletions.
diff --git a/src/components/ebay-carousel/component.js b/src/components/ebay-carousel/component.js
@@ -104,11 +104,11 @@ function onRender() {
                                   ? child.setAttribute(
                                         "tabindex",
                                         child.getAttribute(
-                                            "data-carousel-tabindex"
-                                        )
+                                            "data-carousel-tabindex",
+                                        ),
                                     )
                                   : child.removeAttribute("tabindex")
-                        : (child) => child.setAttribute("tabindex", "-1")
+                        : (child) => child.setAttribute("tabindex", "-1"),
                 );
             });
         });
@@ -124,15 +124,15 @@ function onRender() {
                     this.cancelScrollTransition = scrollTransition(
                         listEl,
                         offset,
-                        this.emitUpdate
+                        this.emitUpdate,
                     );
                 } else if (this.isMoving) {
                     // Animate to the new scrolling position and emit update events afterward.
                     config.scrollTransitioning = true;
                     this.cancelScrollTransition = scrollTransition(
                         listEl,
                         getOffset(state),
-                        this.emitUpdate
+                        this.emitUpdate,
                     );
                 }
             }
@@ -261,11 +261,11 @@ function handleScroll(scrollLeft) {
 
         const deltaLow = Math.abs(scrollLeft - items[low * itemsPerSlide].left);
         const deltaHigh = Math.abs(
-            scrollLeft - items[high * itemsPerSlide].left
+            scrollLeft - items[high * itemsPerSlide].left,
         );
         closest = normalizeIndex(
             state,
-            (deltaLow > deltaHigh ? high : low) * itemsPerSlide
+            (deltaLow > deltaHigh ? high : low) * itemsPerSlide,
         );
     }
 
@@ -282,7 +282,16 @@ function handleStartInteraction() {
 }
 
 function handleEndInteraction() {
-    this.setState("interacting", false);
+    // In case the user moves the cursor out of the carousel before the transition is over.
+    // We need to make sure the carousel does not rerender in the middle of the transition.
+    clearTimeout(this.interactionEndTimeout);
+    if (!this.isMoving) {
+        this.setState("interacting", false);
+    } else if (this.state.interacting) {
+        this.interactionEndTimeout = setTimeout(() => {
+            this.handleEndInteraction();
+        }, 100);
+    }
 }
 
 /**
@@ -569,7 +578,7 @@ export default {
             return {
                 htmlAttributes: processHtmlAttributes(
                     item,
-                    itemSkippedAttributes
+                    itemSkippedAttributes,
                 ),
                 class: isStartOfSlide
                     ? ["carousel__snap-point", item.class]
@@ -612,7 +621,7 @@ export default {
                     if (!config.scrollTransitioning) {
                         handleScroll.call(this, this.listEl.scrollLeft);
                     }
-                })
+                }),
             );
         } else {
             this.subscribeTo(this.listEl).on("transitionend", ({ target }) => {