From 91da3b2e4d4c57b507103af7f92e543280116a32 Mon Sep 17 00:00:00 2001
From: melloware <mellowaredev@gmail.com>
Date: Tue, 6 Aug 2024 16:47:15 -0400
Subject: [PATCH] Fix #6995: Key should be reference on element and not spread

---
 .../lib/autocomplete/AutoCompletePanel.js     |  7 +++++--
 components/lib/breadcrumb/BreadCrumb.js       | 21 +++++++++++++------
 components/lib/calendar/Calendar.js           | 10 ++++-----
 components/lib/chip/Chip.js                   | 10 ++++-----
 components/lib/chips/Chips.js                 |  3 +--
 components/lib/dock/Dock.js                   |  3 +--
 components/lib/menu/Menu.js                   | 15 +++++++------
 components/lib/menubar/MenubarSub.js          | 11 +++++-----
 components/lib/panelmenu/PanelMenu.js         |  3 +--
 components/lib/panelmenu/PanelMenuSub.js      |  6 ++----
 components/lib/steps/Steps.js                 |  7 +++++--
 components/lib/tabmenu/TabMenu.js             |  7 +++++--
 12 files changed, 58 insertions(+), 45 deletions(-)

diff --git a/components/lib/autocomplete/AutoCompletePanel.js b/components/lib/autocomplete/AutoCompletePanel.js
index c0636c4375..e1026cf0c7 100644
--- a/components/lib/autocomplete/AutoCompletePanel.js
+++ b/components/lib/autocomplete/AutoCompletePanel.js
@@ -64,7 +64,6 @@ export const AutoCompletePanel = React.memo(
             const itemGroupProps = mergeProps(
                 {
                     index,
-                    key: key ? key : null,
                     className: cx('itemGroup'),
                     'data-p-highlight': false,
                     ...labelItemProps
@@ -72,7 +71,11 @@ export const AutoCompletePanel = React.memo(
                 _ptm('itemGroup')
             );
 
-            return <li {...itemGroupProps}>{content}</li>;
+            return (
+                <li {...itemGroupProps} key={key ? key : null}>
+                    {content}
+                </li>
+            );
         };
 
         const createListItem = (item, key, index, listItemProps) => {
diff --git a/components/lib/breadcrumb/BreadCrumb.js b/components/lib/breadcrumb/BreadCrumb.js
index acd08e51b6..1c40fffaee 100644
--- a/components/lib/breadcrumb/BreadCrumb.js
+++ b/components/lib/breadcrumb/BreadCrumb.js
@@ -106,14 +106,17 @@ export const BreadCrumb = React.memo(
                 const menuitemProps = mergeProps(
                     {
                         id: key,
-                        key,
                         className: cx('home', { _className, disabled }),
                         style
                     },
                     ptm('home')
                 );
 
-                return <li {...menuitemProps}>{content}</li>;
+                return (
+                    <li {...menuitemProps} key={key}>
+                        {content}
+                    </li>
+                );
             }
 
             return null;
@@ -133,14 +136,17 @@ export const BreadCrumb = React.memo(
             const separatorProps = mergeProps(
                 {
                     id: key,
-                    key,
                     className: cx('separator'),
                     role: 'separator'
                 },
                 ptm('separator')
             );
 
-            return <li {...separatorProps}>{separatorIcon}</li>;
+            return (
+                <li {...separatorProps} key={key}>
+                    {separatorIcon}
+                </li>
+            );
         };
 
         const createMenuitem = (item, index) => {
@@ -184,14 +190,17 @@ export const BreadCrumb = React.memo(
             const menuitemProps = mergeProps(
                 {
                     id: key,
-                    key,
                     className: cx('menuitem', { item }),
                     style: item.style
                 },
                 ptm('menuitem')
             );
 
-            return <li {...menuitemProps}>{content}</li>;
+            return (
+                <li {...menuitemProps} key={key}>
+                    {content}
+                </li>
+            );
         };
 
         const createMenuitems = () => {
diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js
index bc484c6140..3fe463b84f 100644
--- a/components/lib/calendar/Calendar.js
+++ b/components/lib/calendar/Calendar.js
@@ -3587,8 +3587,7 @@ export const Calendar = React.memo(
             const dates = createDates(monthMetaData, groupIndex);
             const containerProps = mergeProps(
                 {
-                    className: cx('container'),
-                    key: UniqueComponentId('calendar_container_')
+                    className: cx('container')
                 },
                 ptm('container')
             );
@@ -3605,7 +3604,7 @@ export const Calendar = React.memo(
 
             return (
                 currentView === 'date' && (
-                    <div {...containerProps}>
+                    <div {...containerProps} key={UniqueComponentId('calendar_container_')}>
                         <table {...tableProps}>
                             <thead {...tableHeaderProps}>
                                 <tr {...tableHeaderRowProps}>{dayNames}</tr>
@@ -3635,15 +3634,14 @@ export const Calendar = React.memo(
 
             const headerProps = mergeProps(
                 {
-                    className: cx('header'),
-                    key: index
+                    className: cx('header')
                 },
                 ptm('header')
             );
 
             return (
                 <div {...groupProps} key={monthKey}>
-                    <div {...headerProps}>
+                    <div {...headerProps} key={index}>
                         {header}
                         {backwardNavigator}
                         {title}
diff --git a/components/lib/chip/Chip.js b/components/lib/chip/Chip.js
index 4bc6a769e9..1c599d5f9a 100644
--- a/components/lib/chip/Chip.js
+++ b/components/lib/chip/Chip.js
@@ -41,7 +41,6 @@ export const Chip = React.memo(
 
             const removeIconProps = mergeProps(
                 {
-                    key: 'removeIcon',
                     role: 'button',
                     tabIndex: 0,
                     className: cx('removeIcon'),
@@ -56,7 +55,6 @@ export const Chip = React.memo(
             if (props.image) {
                 const imageProps = mergeProps(
                     {
-                        key: 'image',
                         src: props.image,
                         onError: props.onImageError
                     },
@@ -67,7 +65,6 @@ export const Chip = React.memo(
             } else if (props.icon) {
                 const chipIconProps = mergeProps(
                     {
-                        key: 'icon',
                         className: cx('icon')
                     },
                     ptm('icon')
@@ -79,13 +76,16 @@ export const Chip = React.memo(
             if (props.label) {
                 const labelProps = mergeProps(
                     {
-                        key: 'label',
                         className: cx('label')
                     },
                     ptm('label')
                 );
 
-                content.push(<span {...labelProps}>{props.label}</span>);
+                content.push(
+                    <span {...labelProps} key="label">
+                        {props.label}
+                    </span>
+                );
             }
 
             if (props.removable) {
diff --git a/components/lib/chips/Chips.js b/components/lib/chips/Chips.js
index dc376003d7..a2112d9862 100644
--- a/components/lib/chips/Chips.js
+++ b/components/lib/chips/Chips.js
@@ -349,7 +349,6 @@ export const Chips = React.memo(
             const icon = createRemoveIcon(value, index);
             const tokenProps = mergeProps(
                 {
-                    key: `${index}_${value}`,
                     id: props.inputId + '_chips_item_' + index,
                     role: 'option',
                     'aria-label': value,
@@ -364,7 +363,7 @@ export const Chips = React.memo(
             );
 
             return (
-                <li {...tokenProps}>
+                <li {...tokenProps} key={`${index}_${value}`}>
                     {label}
                     {icon}
                 </li>
diff --git a/components/lib/dock/Dock.js b/components/lib/dock/Dock.js
index cfadbdd910..00d5e2de77 100644
--- a/components/lib/dock/Dock.js
+++ b/components/lib/dock/Dock.js
@@ -237,7 +237,6 @@ export const Dock = React.memo(
                 {
                     id: key,
                     role: 'menuitem',
-                    key,
                     'aria-label': label,
                     'aria-disabled': disabled,
                     'data-p-focused': active,
@@ -250,7 +249,7 @@ export const Dock = React.memo(
             );
 
             return (
-                <li {...menuitemProps}>
+                <li {...menuitemProps} key={key}>
                     <div {...contentProps}>{content}</div>
                 </li>
             );
diff --git a/components/lib/menu/Menu.js b/components/lib/menu/Menu.js
index 2b8313cf0c..8ea00da93d 100644
--- a/components/lib/menu/Menu.js
+++ b/components/lib/menu/Menu.js
@@ -302,7 +302,6 @@ export const Menu = React.memo(
             const submenuHeaderProps = mergeProps(
                 {
                     id: key,
-                    key,
                     role: 'none',
                     className: classNames(submenu.className, cx('submenuHeader', { submenu })),
                     style: sx('submenuHeader', { submenu }),
@@ -313,7 +312,9 @@ export const Menu = React.memo(
 
             return (
                 <React.Fragment key={key}>
-                    <li {...submenuHeaderProps}>{submenu.label}</li>
+                    <li {...submenuHeaderProps} key={key}>
+                        {submenu.label}
+                    </li>
                     {items}
                 </React.Fragment>
             );
@@ -324,14 +325,13 @@ export const Menu = React.memo(
             const separatorProps = mergeProps(
                 {
                     id: key,
-                    key,
                     className: classNames(item.className, cx('separator')),
                     role: 'separator'
                 },
                 ptm('separator')
             );
 
-            return <li {...separatorProps} />;
+            return <li {...separatorProps} key={key} />;
         };
 
         const createMenuItem = (item, index, parentId = null) => {
@@ -408,7 +408,6 @@ export const Menu = React.memo(
             const menuitemProps = mergeProps(
                 {
                     id: key,
-                    key,
                     className: classNames(item.className, cx('menuitem', { focused: focusedOptionIndex === key })),
                     style: sx('menuitem', { item }),
                     role: 'menuitem',
@@ -420,7 +419,11 @@ export const Menu = React.memo(
                 getMenuItemPTOptions('menuitem', menuContext)
             );
 
-            return <li {...menuitemProps}>{content}</li>;
+            return (
+                <li {...menuitemProps} key={key}>
+                    {content}
+                </li>
+            );
         };
 
         const createItem = (item, index) => {
diff --git a/components/lib/menubar/MenubarSub.js b/components/lib/menubar/MenubarSub.js
index 76b37a5e81..ee688427e8 100644
--- a/components/lib/menubar/MenubarSub.js
+++ b/components/lib/menubar/MenubarSub.js
@@ -103,11 +103,10 @@ export const MenubarSub = React.memo(
             return index - props.model.slice(0, index).filter((processedItem) => isItemVisible(processedItem) && getItemProp(processedItem, 'separator')).length + 1;
         };
 
-        const createSeparator = (index) => {
-            const key = props.id + '_separator_' + index;
+        const createSeparator = (processedItem, index) => {
+            const key = props.id + '_separator_' + index + '_' + processedItem.key;
             const separatorProps = mergeProps(
                 {
-                    key,
                     'data-id': key,
                     className: cx('separator'),
                     role: 'separator'
@@ -115,7 +114,7 @@ export const MenubarSub = React.memo(
                 ptm('separator', { hostName: props.hostName })
             );
 
-            return <li {...separatorProps} />;
+            return <li {...separatorProps} key={key} />;
         };
 
         const createSubmenu = (processedItem) => {
@@ -258,7 +257,7 @@ export const MenubarSub = React.memo(
             );
 
             return (
-                <li {...menuitemProps} key={dataId}>
+                <li {...menuitemProps} key={`${dataId}`}>
                     <div {...contentProps}>{content}</div>
                     {submenu}
                 </li>
@@ -266,7 +265,7 @@ export const MenubarSub = React.memo(
         };
 
         const createItem = (processedItem, index) => {
-            return getItemProp(processedItem, 'separator') ? createSeparator(index) : createMenuitem(processedItem, index);
+            return getItemProp(processedItem, 'separator') ? createSeparator(processedItem, index) : createMenuitem(processedItem, index);
         };
 
         const createMenu = () => {
diff --git a/components/lib/panelmenu/PanelMenu.js b/components/lib/panelmenu/PanelMenu.js
index 169b515f12..d497fc6419 100644
--- a/components/lib/panelmenu/PanelMenu.js
+++ b/components/lib/panelmenu/PanelMenu.js
@@ -331,7 +331,6 @@ export const PanelMenu = React.memo(
 
             const panelProps = mergeProps(
                 {
-                    key: key,
                     id: item?.id || generatePanelId(index),
                     className: cx('panel', { item }),
                     style: item.style
@@ -394,7 +393,7 @@ export const PanelMenu = React.memo(
             );
 
             return (
-                <div {...panelProps}>
+                <div {...panelProps} key={key}>
                     <div {...headerProps}>
                         <div {...headerContentProps}>{content}</div>
                     </div>
diff --git a/components/lib/panelmenu/PanelMenuSub.js b/components/lib/panelmenu/PanelMenuSub.js
index 1e748c6c77..82e3b0b80c 100644
--- a/components/lib/panelmenu/PanelMenuSub.js
+++ b/components/lib/panelmenu/PanelMenuSub.js
@@ -94,14 +94,13 @@ export const PanelMenuSub = React.memo(
             const separatorProps = mergeProps(
                 {
                     id: key,
-                    key,
                     className: cx('separator'),
                     role: 'separator'
                 },
                 _ptm('separator')
             );
 
-            return <li {...separatorProps} />;
+            return <li {...separatorProps} key={key} />;
         };
 
         const createSubmenu = (processedItem, active) => {
@@ -232,7 +231,6 @@ export const PanelMenuSub = React.memo(
 
             const menuitemProps = mergeProps(
                 {
-                    key,
                     id: key,
                     className: cx('menuitem', { item, focused: itemFocused, disabled: disabled }),
                     style: item.style,
@@ -249,7 +247,7 @@ export const PanelMenuSub = React.memo(
             );
 
             return (
-                <li {...menuitemProps}>
+                <li {...menuitemProps} key={key}>
                     <div {...contentProps}>{content}</div>
                     {submenu}
                 </li>
diff --git a/components/lib/steps/Steps.js b/components/lib/steps/Steps.js
index c0ca977276..4cbed933b6 100644
--- a/components/lib/steps/Steps.js
+++ b/components/lib/steps/Steps.js
@@ -232,7 +232,6 @@ export const Steps = React.memo(
 
             const menuItemProps = mergeProps(
                 {
-                    key,
                     id: key,
                     className: cx('menuitem', { active, disabled, item }),
                     style: item.style
@@ -240,7 +239,11 @@ export const Steps = React.memo(
                 ptm('menuitem')
             );
 
-            return <li {...menuItemProps}>{content}</li>;
+            return (
+                <li {...menuItemProps} key={key}>
+                    {content}
+                </li>
+            );
         };
 
         const createItems = () => {
diff --git a/components/lib/tabmenu/TabMenu.js b/components/lib/tabmenu/TabMenu.js
index 778b6ce57d..d05e5fd128 100644
--- a/components/lib/tabmenu/TabMenu.js
+++ b/components/lib/tabmenu/TabMenu.js
@@ -284,7 +284,6 @@ export const TabMenu = React.memo(
                 {
                     ref: tabsRef.current[`tab_${index}`],
                     id: key,
-                    key,
                     onKeyDown: (event) => onKeyDownItem(event, item, index),
                     className: cx('menuitem', { _className, active, disabled }),
                     style: style,
@@ -296,7 +295,11 @@ export const TabMenu = React.memo(
                 getPTOptions('menuitem', item, index)
             );
 
-            return <li {...menuItemProps}>{content}</li>;
+            return (
+                <li {...menuItemProps} key={key}>
+                    {content}
+                </li>
+            );
         };
 
         const createItems = () => {