From a61f57bbf7b553f1779c600f73ac996cab2eff8d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= Date: Tue, 29 Apr 2025 05:40:02 +0800 Subject: [PATCH] fix(breadcrumbs): missing key for ellipsisItem (#5239) * fix(breadcrumbs): missing key for ellipsisItem * chore(changeset): add changeset --- .changeset/modern-balloons-wash.md | 5 +++++ packages/components/breadcrumbs/src/breadcrumbs.tsx | 4 ++-- 2 files changed, 7 insertions(+), 2 deletions(-) create mode 100644 .changeset/modern-balloons-wash.md diff --git a/.changeset/modern-balloons-wash.md b/.changeset/modern-balloons-wash.md new file mode 100644 index 000000000..a17be75f9 --- /dev/null +++ b/.changeset/modern-balloons-wash.md @@ -0,0 +1,5 @@ +--- +"@heroui/breadcrumbs": patch +--- + +fixed missing key for ellipsisItem in breadcrumbs (#4973) diff --git a/packages/components/breadcrumbs/src/breadcrumbs.tsx b/packages/components/breadcrumbs/src/breadcrumbs.tsx index dced77d03..db7e24bb1 100644 --- a/packages/components/breadcrumbs/src/breadcrumbs.tsx +++ b/packages/components/breadcrumbs/src/breadcrumbs.tsx @@ -1,4 +1,4 @@ -import {cloneElement, useMemo} from "react"; +import {cloneElement, isValidElement, useMemo} from "react"; import {forwardRef} from "@heroui/system"; import {ChevronRightIcon, EllipsisIcon} from "@heroui/shared-icons"; import {warn} from "@heroui/shared-utils"; @@ -90,7 +90,7 @@ const Breadcrumbs = forwardRef<"div", BreadcrumbsProps>((props, ref) => { return [ ...items.slice(0, itemsBeforeCollapse), - ellipsisItem, + isValidElement(ellipsisItem) && cloneElement(ellipsisItem, {key: "ellipsis-item"}), ...items.slice(items.length - itemsAfterCollapse, items.length), ]; }, [