Skip to content

Commit

Permalink
Fix primefaces#7368: Unique key prop added to CHips and icons
Browse files Browse the repository at this point in the history
  • Loading branch information
@melloware
melloware committed Dec 6, 2024
1 parent 4994928 commit 0f368e5
Show file tree
Hide file tree
Showing 10 changed files with 88 additions and 95 deletions.
1 change: 0 additions & 1 deletion components/lib/button/__snapshots__/Button.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,6 @@ exports[`Button when click the button if loading is true it renders Button with
disabled=""
>
<svg
aria-hidden="true"
class="p-icon p-icon-spin p-button-icon p-c p-button-loading-icon p-button-loading-icon"
data-pc-section="loadingicon"
fill="none"
Expand Down
10 changes: 7 additions & 3 deletions components/lib/chip/Chip.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
{
Expand All @@ -82,7 +82,7 @@ export const Chip = React.memo(
);

content.push(
<span {...labelProps} key="label">
<span {...labelProps} key={UniqueComponentId('label')}>
{props.label}
</span>
);
Expand All @@ -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, () => ({
Expand Down
2 changes: 0 additions & 2 deletions components/lib/chip/__snapshots__/Chip.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,6 @@ exports[`Chip when removable is true it returns with remove icon: before remove
data-pc-section="root"
>
<svg
aria-hidden="true"
class="p-icon p-chip-remove-icon"
data-pc-section="removeicon"
fill="none"
Expand Down Expand Up @@ -117,7 +116,6 @@ exports[`Chip when removable is true the chip is removed when ENTER is pressed:
data-pc-section="root"
>
<svg
aria-hidden="true"
class="p-icon p-chip-remove-icon"
data-pc-section="removeicon"
fill="none"
Expand Down
12 changes: 9 additions & 3 deletions components/lib/chips/Chips.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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(
{
Expand Down Expand Up @@ -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} />}
</>
);
Expand Down
55 changes: 25 additions & 30 deletions components/lib/fieldset/__snapshots__/Fieldset.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,23 +68,22 @@ exports[`Fieldset when Fieldset is toggleable it must expand and collapse: expan
class="p-fieldset p-component p-fieldset-toggleable"
data-pc-name="fieldset"
data-pc-section="root"
id="pr_id_3"
id="pr_id_6"
>
<legend
class="p-fieldset-legend p-unselectable-text"
data-pc-section="legend"
>
<a
aria-controls="pr_id_3_content"
aria-controls="pr_id_6_content"
aria-expanded="false"
aria-label="Expand/Collapse"
data-pc-section="toggler"
id="pr_id_3_header"
id="pr_id_6_header"
role="button"
tabindex="0"
>
<svg
aria-hidden="true"
class="p-icon p-fieldset-toggler"
data-pc-section="togglericon"
fill="none"
Expand All @@ -107,10 +106,10 @@ exports[`Fieldset when Fieldset is toggleable it must expand and collapse: expan
</a>
</legend>
<div
aria-labelledby="pr_id_3_header"
aria-labelledby="pr_id_6_header"
class="p-toggleable-content p-toggleable-content-exit p-toggleable-content-exit-active"
data-pc-section="toggleablecontent"
id="pr_id_3_content"
id="pr_id_6_content"
role="region"
>
<div
Expand All @@ -132,23 +131,22 @@ exports[`Fieldset when Fieldset is toggleable it must expand and collapse: expan
class="p-fieldset p-component p-fieldset-toggleable"
data-pc-name="fieldset"
data-pc-section="root"
id="pr_id_3"
id="pr_id_6"
>
<legend
class="p-fieldset-legend p-unselectable-text"
data-pc-section="legend"
>
<a
aria-controls="pr_id_3_content"
aria-controls="pr_id_6_content"
aria-expanded="true"
aria-label="Expand/Collapse"
data-pc-section="toggler"
id="pr_id_3_header"
id="pr_id_6_header"
role="button"
tabindex="0"
>
<svg
aria-hidden="true"
class="p-icon p-fieldset-toggler"
data-pc-section="togglericon"
fill="none"
Expand All @@ -171,10 +169,10 @@ exports[`Fieldset when Fieldset is toggleable it must expand and collapse: expan
</a>
</legend>
<div
aria-labelledby="pr_id_3_header"
aria-labelledby="pr_id_6_header"
class="p-toggleable-content"
data-pc-section="toggleablecontent"
id="pr_id_3_content"
id="pr_id_6_content"
role="region"
>
<div
Expand All @@ -196,23 +194,22 @@ exports[`Fieldset when Fieldset is toggleable it must expand and collapse: expan
class="p-fieldset p-component p-fieldset-toggleable"
data-pc-name="fieldset"
data-pc-section="root"
id="pr_id_3"
id="pr_id_6"
>
<legend
class="p-fieldset-legend p-unselectable-text"
data-pc-section="legend"
>
<a
aria-controls="pr_id_3_content"
aria-controls="pr_id_6_content"
aria-expanded="true"
aria-label="Expand/Collapse"
data-pc-section="toggler"
id="pr_id_3_header"
id="pr_id_6_header"
role="button"
tabindex="0"
>
<svg
aria-hidden="true"
class="p-icon p-fieldset-toggler"
data-pc-section="togglericon"
fill="none"
Expand All @@ -235,10 +232,10 @@ exports[`Fieldset when Fieldset is toggleable it must expand and collapse: expan
</a>
</legend>
<div
aria-labelledby="pr_id_3_header"
aria-labelledby="pr_id_6_header"
class="p-toggleable-content p-toggleable-content-enter p-toggleable-content-enter-active"
data-pc-section="toggleablecontent"
id="pr_id_3_content"
id="pr_id_6_content"
role="region"
>
<div
Expand All @@ -260,23 +257,22 @@ exports[`Fieldset when Fieldset is toggleable it will toggle when clicked: toggl
class="p-fieldset p-component p-fieldset-toggleable"
data-pc-name="fieldset"
data-pc-section="root"
id="pr_id_2"
id="pr_id_3"
>
<legend
class="p-fieldset-legend p-unselectable-text"
data-pc-section="legend"
>
<a
aria-controls="pr_id_2_content"
aria-controls="pr_id_3_content"
aria-expanded="true"
aria-label="Toggleable"
data-pc-section="toggler"
id="pr_id_2_header"
id="pr_id_3_header"
role="button"
tabindex="0"
>
<svg
aria-hidden="true"
class="p-icon p-fieldset-toggler"
data-pc-section="togglericon"
fill="none"
Expand All @@ -299,10 +295,10 @@ exports[`Fieldset when Fieldset is toggleable it will toggle when clicked: toggl
</a>
</legend>
<div
aria-labelledby="pr_id_2_header"
aria-labelledby="pr_id_3_header"
class="p-toggleable-content"
data-pc-section="toggleablecontent"
id="pr_id_2_content"
id="pr_id_3_content"
role="region"
>
<div
Expand All @@ -324,23 +320,22 @@ exports[`Fieldset when Fieldset is toggleable it will toggle when clicked: toggl
class="p-fieldset p-component p-fieldset-toggleable"
data-pc-name="fieldset"
data-pc-section="root"
id="pr_id_2"
id="pr_id_3"
>
<legend
class="p-fieldset-legend p-unselectable-text"
data-pc-section="legend"
>
<a
aria-controls="pr_id_2_content"
aria-controls="pr_id_3_content"
aria-expanded="true"
aria-label="Toggleable"
data-pc-section="toggler"
id="pr_id_2_header"
id="pr_id_3_header"
role="button"
tabindex="0"
>
<svg
aria-hidden="true"
class="p-icon p-fieldset-toggler"
data-pc-section="togglericon"
fill="none"
Expand All @@ -363,10 +358,10 @@ exports[`Fieldset when Fieldset is toggleable it will toggle when clicked: toggl
</a>
</legend>
<div
aria-labelledby="pr_id_2_header"
aria-labelledby="pr_id_3_header"
class="p-toggleable-content"
data-pc-section="toggleablecontent"
id="pr_id_2_content"
id="pr_id_3_content"
role="region"
>
<div
Expand Down
6 changes: 0 additions & 6 deletions components/lib/message/__snapshots__/Message.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ exports[`Message default 1`] = `
role="alert"
>
<svg
aria-hidden="true"
class="p-icon p-inline-message-icon"
data-pc-section="icon"
fill="none"
Expand Down Expand Up @@ -85,7 +84,6 @@ exports[`Message severity error 1`] = `
role="alert"
>
<svg
aria-hidden="true"
class="p-icon p-inline-message-icon"
data-pc-section="icon"
fill="none"
Expand Down Expand Up @@ -122,7 +120,6 @@ exports[`Message severity info 1`] = `
role="alert"
>
<svg
aria-hidden="true"
class="p-icon p-inline-message-icon"
data-pc-section="icon"
fill="none"
Expand Down Expand Up @@ -159,7 +156,6 @@ exports[`Message severity success 1`] = `
role="alert"
>
<svg
aria-hidden="true"
class="p-icon p-inline-message-icon"
data-pc-section="icon"
fill="none"
Expand Down Expand Up @@ -194,7 +190,6 @@ exports[`Message severity warn 1`] = `
role="alert"
>
<svg
aria-hidden="true"
class="p-icon p-inline-message-icon"
data-pc-section="icon"
fill="none"
Expand Down Expand Up @@ -237,7 +232,6 @@ exports[`Message templating 1`] = `
role="alert"
>
<svg
aria-hidden="true"
class="p-icon p-inline-message-icon"
data-pc-section="icon"
fill="none"
Expand Down
Loading

0 comments on commit 0f368e5

Please sign in to comment.