From e0ef3187518e228e6e0cacce6383346b55375d4d Mon Sep 17 00:00:00 2001
From: Isaac Sanchez-Hawkins <266845420+isanchez404@users.noreply.github.com>
Date: Tue, 12 May 2026 04:00:02 -0400
Subject: [PATCH] fix(ui): clamp text loop index (#1221)

* fix(ui): clamp text loop index

* fix(ui): report clamped text loop index

---------

Co-authored-by: Isaac Sanchez <isanchez-hawkins@arize.com>
---
 packages/ui/src/components/ui/TextLoop.tsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/ui/TextLoop.tsx b/packages/ui/src/components/ui/TextLoop.tsx
index daaca4a9..42db831f 100644
--- a/packages/ui/src/components/ui/TextLoop.tsx
+++ b/packages/ui/src/components/ui/TextLoop.tsx
@@ -35,7 +35,23 @@ export function TextLoop({
   const items = Children.toArray(children);
 
   useEffect(() => {
-    if (!trigger) return;
+    let next = currentIndex;
+    if (items.length === 0) {
+      next = 0;
+    } else if (!Number.isInteger(currentIndex) || currentIndex < 0) {
+      next = 0;
+    } else if (currentIndex >= items.length) {
+      next = items.length - 1;
+    }
+
+    if (next !== currentIndex) {
+      setCurrentIndex(next);
+      onIndexChange?.(next);
+    }
+  }, [currentIndex, items.length, onIndexChange]);
+
+  useEffect(() => {
+    if (!trigger || items.length <= 1) return;
 
     const intervalMs = interval * 1000;
     const timer = setInterval(() => {