From 9d65b40d51b3c969429f2fcd1ae57880ee3a518d Mon Sep 17 00:00:00 2001
From: Mert Can Altin <mert.altin@trendyol.com>
Date: Tue, 3 Sep 2024 10:28:27 +0300
Subject: [PATCH] fix(carousel): implement auto slide without DOM focus
 interference

---
 src/components/carousel/defaultProps.ts |  2 +-
 src/components/carousel/index.tsx       | 16 +++++++---------
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/components/carousel/defaultProps.ts b/src/components/carousel/defaultProps.ts
index a01b090..dc11e6b 100644
--- 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
index 2243a7f..afa9655 100644
--- 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,8 @@ 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(() => {
+				slide(SlideDirection.Right);
 			}, props.autoSwipe);
 		}
 	};
@@ -254,18 +252,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