fix(carousel): implement auto slide without DOM focus interference

Trendyol · Sep 3, 2024 · 8033f2e · 8033f2e
1 parent bef4a18
commit 8033f2e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 9 deletions.
diff --git a/src/components/carousel/defaultProps.ts b/src/components/carousel/defaultProps.ts
@@ -22,5 +22,5 @@ export const defaultProps: Required<CarouselProps> = {
 	triggerClickOn: Number.MIN_SAFE_INTEGER,
 	hideArrows: false,
 	onLeftArrowClick: () => null,
-	onRightArrowClick: () => null
+	onRightArrowClick: () => null,
 };
diff --git a/src/components/carousel/index.tsx b/src/components/carousel/index.tsx
@@ -55,7 +55,7 @@ export const Carousel: FunctionComponent<CarouselProps> = (userProps: CarouselPr
 	const [page, setPage] = useState<number>(0);
 	const isPaginating = useRef(false);
 	const slideButtonRef = useRef<HTMLDivElement>(null);
-	const autoSwipeTimer = useRef<number>();
+	const autoSwipeTimer = useRef<number>(0);
 	const isNavigation = typeof props.navigation === 'function';
 
 	if (props.dynamic) {
@@ -93,10 +93,13 @@ export const Carousel: FunctionComponent<CarouselProps> = (userProps: CarouselPr
 			typeof props.autoSwipe === 'number' &&
 			props.autoSwipe > props.transition
 		) {
-			autoSwipeTimer.current = setTimeout(() => {
-				if (slideButtonRef.current) {
-					slideButtonRef.current!.click();
+			autoSwipeTimer.current = window.setTimeout(() => {
+				if (showArrow.right) {
+					slide(SlideDirection.Right);
+				} else {
+					slide(SlideDirection.Left);
 				}
+				autoSwipe();
 			}, props.autoSwipe);
 		}
 	};
@@ -254,18 +257,18 @@ export const Carousel: FunctionComponent<CarouselProps> = (userProps: CarouselPr
 	};
 
 	const onLeftArrowClick = () => {
-		slide(SlideDirection.Left)
+		slide(SlideDirection.Left);
 		if (props.onLeftArrowClick) {
 			props.onLeftArrowClick();
 		}
-	}
+	};
 
 	const onRightArrowClick = () => {
-		slide(SlideDirection.Right)
+		slide(SlideDirection.Right);
 		if (props.onRightArrowClick) {
 			props.onRightArrowClick();
 		}
-	}
+	};
 
 	return (
 		<div