From 8dd04dacadc341c81270f9f5db8e2f63eac8c489 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

---
 components/lib/autocomplete/AutoCompletePanel.js |  7 +++++--
 components/lib/calendar/Calendar.js              | 10 ++++------
 components/lib/chip/Chip.js                      | 10 +++++-----
 components/lib/chips/Chips.js                    |  3 +--
 components/lib/tabmenu/TabMenu.js                |  7 +++++--
 5 files changed, 20 insertions(+), 17 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/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/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 = () => {