From 56111c6f516d28ccdf3400366d4af1c7692f01d6 Mon Sep 17 00:00:00 2001
From: Ying-Fang <yjaw85@gmail.com>
Date: Mon, 23 Feb 2026 06:05:37 -0600
Subject: [PATCH 1/2] fix(ui): unique keys for pagination ellipses

The current ellipses share the same key ("ellipsis"), which may cause rendering bugs.
Added the page value to each ellipsis key to ensure they are unique.
---
 .../ui/src/components/ui/Pagination/Items.tsx    | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/airflow-core/src/airflow/ui/src/components/ui/Pagination/Items.tsx b/airflow-core/src/airflow/ui/src/components/ui/Pagination/Items.tsx
index 06b9c155bf9c2..6dc5436cf4004 100644
--- a/airflow-core/src/airflow/ui/src/components/ui/Pagination/Items.tsx
+++ b/airflow-core/src/airflow/ui/src/components/ui/Pagination/Items.tsx
@@ -24,13 +24,15 @@ import { Item } from "./Item";
 export const Items = (props: React.HTMLAttributes<HTMLElement>) => (
   <ChakraPagination.Context>
     {({ pages }) =>
-      pages.map((page, index) =>
-        page.type === "ellipsis" ? (
-          <Ellipsis index={index} key={page.type} {...props} />
-        ) : (
-          <Item key={page.value} type="page" value={page.value} {...props} />
-        ),
-      )
+      pages.map((page, index) => {
+        if (page.type === "ellipsis") {
+          const prevVal = (pages[index - 1] as { value: number }).value;
+
+          return <Ellipsis index={index} key={`ellipsis-${prevVal}`} {...props} />;
+        }
+
+        return <Item key={page.value} type="page" value={page.value} {...props} />;
+      })
     }
   </ChakraPagination.Context>
 );

From 18459788add8ceb2e7a6a1c61c313c0337b3e92b Mon Sep 17 00:00:00 2001
From: Ying-Fang <yjaw85@gmail.com>
Date: Mon, 23 Feb 2026 07:43:01 -0600
Subject: [PATCH 2/2] fix(ui): correct pagination ellipsis logic in web ui

Use the index to ensure ellipsis keys are unique.
---
 .../ui/src/components/ui/Pagination/Items.tsx   | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/airflow-core/src/airflow/ui/src/components/ui/Pagination/Items.tsx b/airflow-core/src/airflow/ui/src/components/ui/Pagination/Items.tsx
index 6dc5436cf4004..e72e9ad099e10 100644
--- a/airflow-core/src/airflow/ui/src/components/ui/Pagination/Items.tsx
+++ b/airflow-core/src/airflow/ui/src/components/ui/Pagination/Items.tsx
@@ -24,15 +24,14 @@ import { Item } from "./Item";
 export const Items = (props: React.HTMLAttributes<HTMLElement>) => (
   <ChakraPagination.Context>
     {({ pages }) =>
-      pages.map((page, index) => {
-        if (page.type === "ellipsis") {
-          const prevVal = (pages[index - 1] as { value: number }).value;
-
-          return <Ellipsis index={index} key={`ellipsis-${prevVal}`} {...props} />;
-        }
-
-        return <Item key={page.value} type="page" value={page.value} {...props} />;
-      })
+      pages.map((page, index) =>
+        page.type === "ellipsis" ? (
+          // eslint-disable-next-line react/no-array-index-key
+          <Ellipsis index={index} key={`${page.type}-${index}`} {...props} />
+        ) : (
+          <Item key={page.value} type="page" value={page.value} {...props} />
+        ),
+      )
     }
   </ChakraPagination.Context>
 );