Fix primefaces#7368: Unique key prop added to CHips and icons

melloware · Dec 6, 2024 · a427add · a427add
1 parent 4994928
commit a427add
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 8 deletions.
diff --git a/components/lib/chip/Chip.js b/components/lib/chip/Chip.js
@@ -61,7 +61,7 @@ export const Chip = React.memo(
                     ptm('image')
                 );
 
-                content.push(<img alt={props.imageAlt} {...imageProps} />);
+                content.push(<img alt={props.imageAlt} {...imageProps} key={UniqueComponentId('image')} />);
             } else if (props.icon) {
                 const chipIconProps = mergeProps(
                     {
@@ -82,7 +82,7 @@ export const Chip = React.memo(
                 );
 
                 content.push(
-                    <span {...labelProps} key="label">
+                    <span {...labelProps} key={UniqueComponentId('label')}>
                         {props.label}
                     </span>
                 );
@@ -109,7 +109,11 @@ export const Chip = React.memo(
                 ptm('root')
             );
 
-            return <div {...rootProps}>{content}</div>;
+            return (
+                <div {...rootProps} key={UniqueComponentId('chip')}>
+                    {content}
+                </div>
+            );
         };
 
         React.useImperativeHandle(ref, () => ({

diff --git a/components/lib/chips/Chips.js b/components/lib/chips/Chips.js
@@ -328,7 +328,7 @@ export const Chips = React.memo(
                     },
                     ptm('removeTokenIcon')
                 );
-                const icon = props.removeIcon || <TimesCircleIcon {...iconProps} />;
+                const icon = props.removeIcon || <TimesCircleIcon {...iconProps} key={`${index}_icon`} />;
                 const removeIcon = IconUtils.getJSXIcon(icon, { ...iconProps }, { props });
 
                 return removeIcon;
@@ -345,7 +345,11 @@ export const Chips = React.memo(
                 },
                 ptm('label')
             );
-            const label = <span {...labelProps}>{content}</span>;
+            const label = (
+                <span {...labelProps} key={`${index}_${value}_span`}>
+                    {content}
+                </span>
+            );
             const icon = createRemoveIcon(value, index);
             const tokenProps = mergeProps(
                 {
@@ -456,7 +460,9 @@ export const Chips = React.memo(
 
         return (
             <>
-                <div {...rootProps}>{list}</div>
+                <div {...rootProps} key="chips">
+                    {list}
+                </div>
                 {hasTooltip && <Tooltip target={inputRef} content={props.tooltip} pt={ptm('tooltip')} {...props.tooltipOptions} />}
             </>
         );

diff --git a/components/lib/utils/IconUtils.js b/components/lib/utils/IconUtils.js
@@ -1,6 +1,6 @@
-import * as React from 'react';
 import { classNames } from './ClassNames';
 import ObjectUtils from './ObjectUtils';
+import UniqueComponentId from './UniqueComponentId';
 
 export default class IconUtils {
     static getJSXIcon(icon, iconProps = {}, options = {}) {
@@ -10,7 +10,7 @@ export default class IconUtils {
             const iconType = typeof icon;
             const className = classNames(iconProps.className, iconType === 'string' && icon);
 
-            content = <span {...iconProps} className={className} />;
+            content = <span {...iconProps} className={className} key={UniqueComponentId('icon')} />;
 
             if (iconType !== 'string') {
                 const defaultContentOptions = {