diff --git a/packages/pluggableWidgets/html-element-web/CHANGELOG.md b/packages/pluggableWidgets/html-element-web/CHANGELOG.md index 7e41f87bd4..b692bad33f 100644 --- a/packages/pluggableWidgets/html-element-web/CHANGELOG.md +++ b/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 diff --git a/packages/pluggableWidgets/html-element-web/package.json b/packages/pluggableWidgets/html-element-web/package.json index f62b156e95..6b48712ea8 100644 --- a/packages/pluggableWidgets/html-element-web/package.json +++ b/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:*", diff --git a/packages/pluggableWidgets/html-element-web/src/HTMLElement.tsx b/packages/pluggableWidgets/html-element-web/src/HTMLElement.tsx index 10b5874968..a6127628f7 100644 --- a/packages/pluggableWidgets/html-element-web/src/HTMLElement.tsx +++ b/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 ( - {items.map(item => ( + {items.map((item, index) => ( { }); it("with innerHTML apply html sanitizing", () => { - const checkSapshot = (html: string): void => { + const checkSnapshot = (html: string): void => { expect( render( { ).toMatchSnapshot(); }; - checkSapshot("

Lorem ipsum

"); - checkSapshot(""); - checkSapshot(`ok`); - checkSapshot("123