fix: an issue with key prop warning

Co-authored-by: Diljohn Singh <diljohn.chauhan@gmail.com>
Co-authored-by: Andries Smit <mr.andries.smit@gmail.com>

Author: 3 people

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.
+
 ## [1.2.2] - 2025-03-14
 
 ### Security

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

@@ -22,9 +22,9 @@ export function HTMLElement(props: HTMLElementContainerProps): ReactElement | nu
 
     return (
         <Fragment>
-            {items.map(item => (
+            {items.map((item, index) => (
                 <HTMLTag
-                    key={item?.id}
+                    key={`${props.name}_${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 () => {