diff --git a/.changeset/modern-balloons-wash.md b/.changeset/modern-balloons-wash.md new file mode 100644 index 0000000000..a17be75f9b --- /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 dced77d036..db7e24bb12 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), ]; }, [