From b754773af07d5005dafc2cf096d304373e2b5779 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/doc/slider/filterdoc.js            | 14 ++++++-------
 .../lib/autocomplete/AutoCompletePanel.js     |  7 +++++--
 components/lib/breadcrumb/BreadCrumb.js       | 21 +++++++++++++------
 components/lib/calendar/Calendar.js           | 10 ++++-----
 components/lib/carousel/Carousel.js           |  3 +--
 .../lib/cascadeselect/CascadeSelectBase.js    |  1 +
 components/lib/chip/Chip.js                   | 14 ++++++-------
 components/lib/chips/Chips.js                 |  3 +--
 components/lib/datascroller/DataScroller.js   | 13 ++++++------
 components/lib/dock/Dock.js                   |  3 +--
 components/lib/galleria/GalleriaItem.js       |  7 +++++--
 components/lib/galleria/GalleriaThumbnails.js |  3 +--
 components/lib/inputotp/InputOtp.js           |  3 +--
 components/lib/listbox/ListBox.js             |  2 +-
 components/lib/listbox/ListBoxItem.js         |  3 +--
 components/lib/mention/MentionBase.js         |  1 +
 components/lib/menu/Menu.js                   | 15 +++++++------
 components/lib/menubar/MenubarSub.js          | 11 +++++-----
 components/lib/multiselect/MultiSelect.js     |  1 -
 components/lib/multiselect/MultiSelectItem.js |  2 +-
 .../lib/multiselect/MultiSelectPanel.js       | 16 +++++++++++---
 components/lib/panelmenu/PanelMenu.js         |  3 +--
 components/lib/panelmenu/PanelMenuSub.js      |  6 ++----
 components/lib/password/Password.js           |  2 --
 components/lib/rating/Rating.js               |  3 +--
 components/lib/speeddial/SpeedDial.js         |  7 +++++--
 components/lib/steps/Steps.js                 |  7 +++++--
 components/lib/tabmenu/TabMenu.js             |  7 +++++--
 28 files changed, 105 insertions(+), 83 deletions(-)

diff --git a/components/doc/slider/filterdoc.js b/components/doc/slider/filterdoc.js
index d040cccc02..b6efe436ec 100644
--- a/components/doc/slider/filterdoc.js
+++ b/components/doc/slider/filterdoc.js
@@ -22,7 +22,7 @@ export function FilterDoc(props) {
 
     const code = {
         basic: `
-<img alt="user header" class="w-full md:w-20rem border-round mb-4" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" style={filterStyle()} />
+<img alt="user header" className="w-full md:w-20rem border-round mb-4" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" style={filterStyle()} />
 <SelectButton value={filter} onChange={(e) => setFilter(e.value)} options={filterOptions} className="mb-3" />
 <Slider
     value={filterValues[filter]}
@@ -46,8 +46,8 @@ export default function FilterDemo() {
 
     return (
         <div className="card flex justify-content-center">
-            <div class="flex flex-column align-items-center">
-                <img alt="user header" class="w-full md:w-20rem border-round mb-4" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" style={filterStyle()} />
+            <div className="flex flex-column align-items-center">
+                <img alt="user header" className="w-full md:w-20rem border-round mb-4" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" style={filterStyle()} />
                 <SelectButton value={filter} onChange={(e) => setFilter(e.value)} options={filterOptions} className="mb-3" />
                 <Slider
                     value={filterValues[filter]}
@@ -75,8 +75,8 @@ export default function FilterDemo() {
 
     return (
         <div className="card flex justify-content-center">
-            <div class="flex flex-column align-items-center">
-                <img alt="user header" class="w-full md:w-20rem border-round mb-4" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" style={filterStyle()} />
+            <div className="flex flex-column align-items-center">
+                <img alt="user header" className="w-full md:w-20rem border-round mb-4" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" style={filterStyle()} />
                 <SelectButton value={filter} onChange={(e) => setFilter(e.value)} options={filterOptions} className="mb-3" />
                 <Slider
                     value={filterValues[filter]}
@@ -104,8 +104,8 @@ export default function FilterDemo() {
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <div class="flex flex-column align-items-center">
-                    <img alt="user header" class="w-full md:w-20rem border-round mb-4" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" style={filterStyle()} />
+                <div className="flex flex-column align-items-center">
+                    <img alt="user header" className="w-full md:w-20rem border-round mb-4" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" style={filterStyle()} />
                     <SelectButton value={filter} onChange={(e) => setFilter(e.value)} options={filterOptions} className="mb-3" />
                     <Slider
                         value={filterValues[filter]}
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/carousel/Carousel.js b/components/lib/carousel/Carousel.js
index d67fc8de27..391e32d641 100644
--- a/components/lib/carousel/Carousel.js
+++ b/components/lib/carousel/Carousel.js
@@ -741,7 +741,6 @@ export const Carousel = React.memo(
             const key = 'carousel-indicator-' + index;
             const indicatorProps = mergeProps(
                 {
-                    key,
                     className: cx('indicator', { isActive }),
                     'data-p-highlight': isActive
                 },
@@ -760,7 +759,7 @@ export const Carousel = React.memo(
             );
 
             return (
-                <li {...indicatorProps}>
+                <li {...indicatorProps} key={key}>
                     <button {...indicatorButtonProps}>
                         <Ripple />
                     </button>
diff --git a/components/lib/cascadeselect/CascadeSelectBase.js b/components/lib/cascadeselect/CascadeSelectBase.js
index 74c6d100e6..4a5b21478c 100644
--- a/components/lib/cascadeselect/CascadeSelectBase.js
+++ b/components/lib/cascadeselect/CascadeSelectBase.js
@@ -134,6 +134,7 @@ export const CascadeSelectBase = ComponentBase.extend({
         disabled: false,
         loadingIcon: null,
         dropdownIcon: null,
+        loading: false,
         id: null,
         inputId: null,
         inputRef: null,
diff --git a/components/lib/chip/Chip.js b/components/lib/chip/Chip.js
index 4bc6a769e9..5bc1277366 100644
--- a/components/lib/chip/Chip.js
+++ b/components/lib/chip/Chip.js
@@ -3,7 +3,7 @@ import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMergeProps } from '../hooks/Hooks';
 import { TimesCircleIcon } from '../icons/timescircle';
-import { classNames, IconUtils, ObjectUtils } from '../utils/Utils';
+import { classNames, IconUtils, ObjectUtils, UniqueComponentId } from '../utils/Utils';
 import { ChipBase } from './ChipBase';
 
 export const Chip = React.memo(
@@ -41,7 +41,6 @@ export const Chip = React.memo(
 
             const removeIconProps = mergeProps(
                 {
-                    key: 'removeIcon',
                     role: 'button',
                     tabIndex: 0,
                     className: cx('removeIcon'),
@@ -51,12 +50,11 @@ export const Chip = React.memo(
                 ptm('removeIcon')
             );
 
-            const icon = props.removeIcon || <TimesCircleIcon {...removeIconProps} />;
+            const icon = props.removeIcon || <TimesCircleIcon {...removeIconProps} key={UniqueComponentId('removeIcon')} />;
 
             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/datascroller/DataScroller.js b/components/lib/datascroller/DataScroller.js
index 9ce1542c13..d35a0c92bb 100644
--- a/components/lib/datascroller/DataScroller.js
+++ b/components/lib/datascroller/DataScroller.js
@@ -190,15 +190,14 @@ export const DataScroller = React.memo(
         };
 
         const createItem = (_value, index) => {
-            const itemProps = mergeProps(
-                {
-                    key: index + '_datascrollitem'
-                },
-                ptm('item')
-            );
+            const itemProps = ptm('item');
             const content = props.itemTemplate ? props.itemTemplate(_value) : _value;
 
-            return <li {...itemProps}>{content}</li>;
+            return (
+                <li {...itemProps} key={index + '_datascrollitem'}>
+                    {content}
+                </li>
+            );
         };
 
         const createEmptyMessage = () => {
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/galleria/GalleriaItem.js b/components/lib/galleria/GalleriaItem.js
index b8d6f96a6f..c76647ac49 100644
--- a/components/lib/galleria/GalleriaItem.js
+++ b/components/lib/galleria/GalleriaItem.js
@@ -287,7 +287,6 @@ export const GalleriaItem = React.memo(
             const indicatorProps = mergeProps(
                 {
                     className: cx('indicator', { isActive }),
-                    key: key,
                     tabIndex: 0,
                     'aria-label': ariaPageLabel(index + 1),
                     'aria-selected': props.activeIndex === index,
@@ -308,7 +307,11 @@ export const GalleriaItem = React.memo(
                 );
             }
 
-            return <li {...indicatorProps}>{indicator}</li>;
+            return (
+                <li {...indicatorProps} key={key}>
+                    {indicator}
+                </li>
+            );
         };
 
         const createIndicators = () => {
diff --git a/components/lib/galleria/GalleriaThumbnails.js b/components/lib/galleria/GalleriaThumbnails.js
index 8d50ce3498..c8fc92fb04 100644
--- a/components/lib/galleria/GalleriaThumbnails.js
+++ b/components/lib/galleria/GalleriaThumbnails.js
@@ -131,7 +131,6 @@ const GalleriaThumbnailItem = React.memo((props) => {
     const thumbnailItemProps = mergeProps(
         {
             className: classNames(props.className, cx('thumbnailItem', { subProps: props })),
-            key: 'p-galleria-thumbnail-item-' + props.index,
             role: 'tab',
             'data-p-active': props.current,
             'aria-selected': props.current,
@@ -157,7 +156,7 @@ const GalleriaThumbnailItem = React.memo((props) => {
     );
 
     return (
-        <div {...thumbnailItemProps}>
+        <div {...thumbnailItemProps} key={props.index + '_galleriathumbnailitem'}>
             <div {...thumbnailItemContentProps}>{content}</div>
         </div>
     );
diff --git a/components/lib/inputotp/InputOtp.js b/components/lib/inputotp/InputOtp.js
index 32836fbe74..3993e6002c 100644
--- a/components/lib/inputotp/InputOtp.js
+++ b/components/lib/inputotp/InputOtp.js
@@ -201,7 +201,6 @@ export const InputOtp = React.memo(
             };
             const inputElementProps = {
                 id: inputElementIndex,
-                key: inputElementIndex,
                 value: tokens[inputElementIndex] || '',
                 inputMode: props?.integerOnly ? 'numeric' : 'text',
                 type: props?.mask ? 'password' : 'text',
@@ -221,7 +220,7 @@ export const InputOtp = React.memo(
                     props: inputElementProps
                 })
             ) : (
-                <InputText {...inputElementProps} {...inputElementEvents} />
+                <InputText {...inputElementProps} {...inputElementEvents} key={inputElementIndex} />
             );
             const inputElements = [inputElement, ...createInputElements(remainingInputs - 1)];
 
diff --git a/components/lib/listbox/ListBox.js b/components/lib/listbox/ListBox.js
index 4825db46d4..b36b33e1a0 100644
--- a/components/lib/listbox/ListBox.js
+++ b/components/lib/listbox/ListBox.js
@@ -749,7 +749,7 @@ export const ListBox = React.memo(
                 );
 
                 return (
-                    <li key={key} {...itemGroupProps}>
+                    <li {...itemGroupProps} key={key}>
                         {groupContent}
                     </li>
                 );
diff --git a/components/lib/listbox/ListBoxItem.js b/components/lib/listbox/ListBoxItem.js
index 55b7925db7..2b88b9a265 100644
--- a/components/lib/listbox/ListBoxItem.js
+++ b/components/lib/listbox/ListBoxItem.js
@@ -66,7 +66,6 @@ export const ListBoxItem = React.memo((props) => {
             onMouseDown: (event) => props.onOptionMouseDown(event, props.index),
             onMouseMove: (event) => props.onOptionMouseMove(event, props.index),
             'aria-label': props.label,
-            key: props.optionKey,
             role: 'option',
             'aria-selected': props.selected,
             'aria-disabled': props.disabled,
@@ -76,7 +75,7 @@ export const ListBoxItem = React.memo((props) => {
     );
 
     return (
-        <li {...itemProps}>
+        <li {...itemProps} key={props.optionKey}>
             {content}
             <Ripple />
         </li>
diff --git a/components/lib/mention/MentionBase.js b/components/lib/mention/MentionBase.js
index 553ef49f8e..0945a22a01 100644
--- a/components/lib/mention/MentionBase.js
+++ b/components/lib/mention/MentionBase.js
@@ -64,6 +64,7 @@ export const MentionBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'Mention',
         autoHighlight: true,
+        autoResize: false,
         className: null,
         delay: 0,
         field: null,
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/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js
index 625969c331..9965f14513 100644
--- a/components/lib/multiselect/MultiSelect.js
+++ b/components/lib/multiselect/MultiSelect.js
@@ -899,7 +899,6 @@ export const MultiSelect = React.memo(
                     const labelKey = label + '_' + i;
                     const iconProps = mergeProps(
                         {
-                            key: i,
                             className: cx('removeTokenIcon'),
                             onClick: (e) => removeChip(e, val)
                         },
diff --git a/components/lib/multiselect/MultiSelectItem.js b/components/lib/multiselect/MultiSelectItem.js
index 2e03e3aa9c..3ba8ce9865 100644
--- a/components/lib/multiselect/MultiSelectItem.js
+++ b/components/lib/multiselect/MultiSelectItem.js
@@ -80,7 +80,7 @@ export const MultiSelectItem = React.memo((props) => {
     );
 
     return (
-        <li {...itemProps}>
+        <li {...itemProps} key={props.index + '_multiselectitem'}>
             <div {...checkboxContainerProps}>
                 <Checkbox ref={checkboxRef} checked={props.selected} icon={checkboxIcon} pt={ptm('checkbox')} unstyled={isUnstyled()} />
             </div>
diff --git a/components/lib/multiselect/MultiSelectPanel.js b/components/lib/multiselect/MultiSelectPanel.js
index 2f4cec035b..ae23ddf9fd 100644
--- a/components/lib/multiselect/MultiSelectPanel.js
+++ b/components/lib/multiselect/MultiSelectPanel.js
@@ -149,7 +149,11 @@ export const MultiSelectPanel = React.memo(
                 getPTOptions('emptyMessage')
             );
 
-            return <li {...emptyMessageProps}>{emptyFilterMessage}</li>;
+            return (
+                <li {...emptyMessageProps} key="emptyFilterMessage">
+                    {emptyFilterMessage}
+                </li>
+            );
         };
 
         const createEmptyContent = () => {
@@ -162,7 +166,11 @@ export const MultiSelectPanel = React.memo(
                 getPTOptions('emptyMessage')
             );
 
-            return <li {...emptyMessageProps}>{emptyMessage}</li>;
+            return (
+                <li {...emptyMessageProps} key="emptyMessage">
+                    {emptyMessage}
+                </li>
+            );
         };
 
         const createItem = (option, index, scrollerOptions = {}) => {
@@ -182,7 +190,9 @@ export const MultiSelectPanel = React.memo(
 
                 return (
                     <React.Fragment key={key}>
-                        <li {...itemGroupProps}>{groupContent}</li>
+                        <li {...itemGroupProps} key={key}>
+                            {groupContent}
+                        </li>
                         {groupChildrenContent}
                     </React.Fragment>
                 );
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/password/Password.js b/components/lib/password/Password.js
index 3a5f62ed95..2f4058956d 100644
--- a/components/lib/password/Password.js
+++ b/components/lib/password/Password.js
@@ -307,7 +307,6 @@ export const Password = React.memo(
 
             const hideIconProps = mergeProps(
                 {
-                    key: 'hideIcon',
                     role: 'switch',
                     tabIndex: props.tabIndex || '0',
                     className: cx('hideIcon'),
@@ -321,7 +320,6 @@ export const Password = React.memo(
 
             const showIconProps = mergeProps(
                 {
-                    key: 'showIcon',
                     role: 'switch',
                     tabIndex: props.tabIndex || '0',
                     className: cx('showIcon'),
diff --git a/components/lib/rating/Rating.js b/components/lib/rating/Rating.js
index 4b50af41dc..7dc076be94 100644
--- a/components/lib/rating/Rating.js
+++ b/components/lib/rating/Rating.js
@@ -141,7 +141,6 @@ export const Rating = React.memo(
 
                 const itemProps = mergeProps(
                     {
-                        key: value,
                         className: cx('item', { active, focusedOptionIndex, isFocusVisibleItem, value }),
                         'data-p-focused': value === focusedOptionIndex,
                         tabIndex: tabIndex,
@@ -154,7 +153,7 @@ export const Rating = React.memo(
                 );
 
                 return (
-                    <div key={value} {...itemProps}>
+                    <div {...itemProps} key={value}>
                         {content}
                     </div>
                 );
diff --git a/components/lib/speeddial/SpeedDial.js b/components/lib/speeddial/SpeedDial.js
index a7f9cec7fa..0cee730077 100644
--- a/components/lib/speeddial/SpeedDial.js
+++ b/components/lib/speeddial/SpeedDial.js
@@ -466,7 +466,6 @@ export const SpeedDial = React.memo(
 
             const menuItemProps = mergeProps(
                 {
-                    key: index,
                     id: `${idState}_${index}`,
                     className: cx('menuitem', { active: isItemActive(`${idState}_${index}`) }),
                     style: getItemStyle(index),
@@ -476,7 +475,11 @@ export const SpeedDial = React.memo(
                 ptm('menuitem')
             );
 
-            return <li {...menuItemProps}>{content}</li>;
+            return (
+                <li {...menuItemProps} key={`${idState}_${index}`}>
+                    {content}
+                </li>
+            );
         };
 
         const createItems = () => {
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 = () => {