From bcb7563ce6d67027219cf2fa571cabb2a7a34544 Mon Sep 17 00:00:00 2001
From: Denis Nikiforov <denis.nikif@gmail.com>
Date: Mon, 6 Jan 2025 10:10:17 +0300
Subject: [PATCH] [4366] Fix a warning for an autocomplete widget

Bug: https://github.com/eclipse-sirius/sirius-web/issues/4366
Signed-off-by: Denis Nikiforov <denis.nikif@gmail.com>
---
 CHANGELOG.adoc                                |  2 ++
 .../src/ReferencePreview.tsx                  | 30 +++++++++-------
 .../ValuedReferenceAutocomplete.tsx           | 34 +++++++++++--------
 3 files changed, 38 insertions(+), 28 deletions(-)

diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
index a603fc5280..c659f0e45d 100644
--- a/CHANGELOG.adoc
+++ b/CHANGELOG.adoc
@@ -27,6 +27,8 @@ This may have some consequences for downstream applications which are embedding
 
 === Bug fixes
 
+- https://github.com/eclipse-sirius/sirius-web/issues/4366[#4366] [form] Fix a warning for an autocomplete widget
+
 
 === New Features
 
diff --git a/packages/forms/frontend/sirius-components-widget-reference/src/ReferencePreview.tsx b/packages/forms/frontend/sirius-components-widget-reference/src/ReferencePreview.tsx
index 810481a839..266fd908fa 100644
--- a/packages/forms/frontend/sirius-components-widget-reference/src/ReferencePreview.tsx
+++ b/packages/forms/frontend/sirius-components-widget-reference/src/ReferencePreview.tsx
@@ -105,19 +105,23 @@ export const ReferencePreview = ({ widget }: PreviewWidgetProps) => {
         value={options}
         disableClearable
         renderTags={(value, getTagProps) =>
-          value.map(({ label, iconURL }, index) => (
-            <Chip
-              classes={{ label: classes.referenceValueStyle }}
-              label={label}
-              data-testid={`reference-value-${label}`}
-              icon={
-                <div>
-                  <IconOverlay iconURL={[iconURL]} alt={''} />
-                </div>
-              }
-              {...getTagProps({ index })}
-            />
-          ))
+          value.map(({ label, iconURL }, index) => {
+            const { key, ...tagProps } = getTagProps({ index });
+            return (
+              <Chip
+                key={key}
+                classes={{ label: classes.referenceValueStyle }}
+                label={label}
+                data-testid={`reference-value-${label}`}
+                icon={
+                  <div>
+                    <IconOverlay iconURL={[iconURL]} alt={''} />
+                  </div>
+                }
+                {...tagProps}
+              />
+            );
+          })
         }
         renderInput={(params) => (
           <TextField
diff --git a/packages/forms/frontend/sirius-components-widget-reference/src/components/ValuedReferenceAutocomplete.tsx b/packages/forms/frontend/sirius-components-widget-reference/src/components/ValuedReferenceAutocomplete.tsx
index c2b3e68abf..b982a11329 100644
--- a/packages/forms/frontend/sirius-components-widget-reference/src/components/ValuedReferenceAutocomplete.tsx
+++ b/packages/forms/frontend/sirius-components-widget-reference/src/components/ValuedReferenceAutocomplete.tsx
@@ -244,21 +244,25 @@ export const ValuedReferenceAutocomplete = ({
       )}
       disableClearable
       renderTags={(value, getTagProps) =>
-        value.map((option, index) => (
-          <Chip
-            classes={{ label: classes.referenceValueStyle }}
-            label={option.label}
-            data-testid={`reference-value-${option.label}`}
-            icon={
-              <div>
-                <IconOverlay iconURL={option.iconURL} alt={option.kind} />
-              </div>
-            }
-            clickable={!readOnly && !widget.readOnly}
-            onClick={() => optionClickHandler(option)}
-            {...getTagProps({ index })}
-          />
-        ))
+        value.map((option, index) => {
+          const { key, ...tagProps } = getTagProps({ index });
+          return (
+            <Chip
+              key={key}
+              classes={{ label: classes.referenceValueStyle }}
+              label={option.label}
+              data-testid={`reference-value-${option.label}`}
+              icon={
+                <div>
+                  <IconOverlay iconURL={option.iconURL} alt={option.kind} />
+                </div>
+              }
+              clickable={!readOnly && !widget.readOnly}
+              onClick={() => optionClickHandler(option)}
+              {...tagProps}
+            />
+          );
+        })
       }
       renderInput={(params) => (
         <TextField