[WC-3183] Fix key prop violation warning for HTMLElement. (#1988)

Author: r0b1n

packages/pluggableWidgets/html-element-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- We fixed a warning related to non-unique "key" props that appeared in certain scenarios. Thanks @Andries-Smit and @DiljohnSingh for your contributions!
+
 ## [1.2.2] - 2025-03-14
 
 ### Security

packages/pluggableWidgets/html-element-web/package.json

@@ -42,7 +42,7 @@
     },
     "dependencies": {
         "@mendix/widget-plugin-component-kit": "workspace:*",
-        "dompurify": "^3.2.6"
+        "dompurify": "^3.3.0"
     },
     "devDependencies": {
         "@mendix/automation-utils": "workspace:*",

packages/pluggableWidgets/html-element-web/src/HTMLElement.tsx

@@ -1,4 +1,4 @@
-import { Fragment, JSX, ReactElement } from "react";
+import { Fragment, JSX, ReactElement, useId } from "react";
 
 import { HTMLElementContainerProps } from "../typings/HTMLElementProps";
 import {
@@ -16,15 +16,17 @@ export function HTMLElement(props: HTMLElementContainerProps): ReactElement | nu
     const tag = prepareTag(props.tagName, props.tagNameCustom);
     const items = props.tagUseRepeat ? props.tagContentRepeatDataSource?.items : [undefined];
 
+    const id = useId();
+
     if (!items?.length) {
         return null;
     }
 
     return (
         <Fragment>
-            {items.map(item => (
+            {items.map((item, index) => (
                 <HTMLTag
-                    key={item?.id}
+                    key={`${id}_${item?.id || index}`}
                     tagName={tag as keyof JSX.IntrinsicElements}
                     attributes={{
                         ...prepareAttributes(createAttributeResolver(item), props.attributes, props.class, props.style),

packages/pluggableWidgets/html-element-web/src/components/__tests__/HTMLTag.spec.tsx

@@ -37,7 +37,7 @@ describe("HTMLTag", () => {
     });
 
     it("with innerHTML apply html sanitizing", () => {
-        const checkSapshot = (html: string): void => {
+        const checkSnapshot = (html: string): void => {
             expect(
                 render(
                     <HTMLTag
@@ -53,10 +53,10 @@ describe("HTMLTag", () => {
             ).toMatchSnapshot();
         };
 
-        checkSapshot("<p>Lorem ipsum <script>alert(1)</script></p>");
-        checkSapshot("<img src=x onerror=alert(1)>");
-        checkSapshot(`<b onmouseover=alert(‘XSS testing!‘)>ok</b>`);
-        checkSapshot("<a>123</a><option><style><img src=x onerror=alert(1)></style>");
+        checkSnapshot("<p>Lorem ipsum <script>alert(1)</script></p>");
+        checkSnapshot("<img src=x onerror=alert(1)>");
+        checkSnapshot(`<b onmouseover=alert(‘XSS testing!‘)>ok</b>`);
+        checkSnapshot("<a>123</a><option><style><img src=x onerror=alert(1)></style>");
     });
 
     it("fires events", async () => {

packages/pluggableWidgets/rich-text-web/package.json

@@ -50,7 +50,7 @@
         "@uiw/codemirror-theme-github": "^4.23.13",
         "@uiw/react-codemirror": "^4.23.13",
         "classnames": "^2.5.1",
-        "dompurify": "^3.2.6",
+        "dompurify": "^3.3.0",
         "js-beautify": "^1.15.4",
         "katex": "^0.16.22",
         "linkifyjs": "^4.3.2",