Fix primefaces#6995: Key should be reference on element and not spread

melloware · Aug 7, 2024 · b754773 · b754773
1 parent 72bc4d4
commit b754773
Show file tree

Hide file tree

Showing 28 changed files with 105 additions and 83 deletions.
diff --git 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
@@ -64,15 +64,18 @@ export const AutoCompletePanel = React.memo(
             const itemGroupProps = mergeProps(
                 {
                     index,
-                    key: key ? key : null,
                     className: cx('itemGroup'),
                     'data-p-highlight': false,
                     ...labelItemProps
                 },
                 _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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -64,6 +64,7 @@ export const MentionBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'Mention',
         autoHighlight: true,
+        autoResize: false,
         className: null,
         delay: 0,
         field: null,