[4366] Fix a warning for an autocomplete widget

Bug: #4366 Signed-off-by: Denis Nikiforov <[email protected]>
eclipse-sirius · Jan 7, 2025 · 155d610 · 155d610
1 parent 3f2ad65
commit 155d610
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 29 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -30,6 +30,7 @@ This may have some consequences for downstream applications which are embedding
 === Bug fixes
 
 - https://github.com/eclipse-sirius/sirius-web/issues/4282[#4282] [diagram] Fixed a warning on the frontend about non-unique GraphQL fragment name
+- 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
@@ -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/...rontend/sirius-components-widget-reference/src/components/ValuedReferenceAutocomplete.tsx b/...rontend/sirius-components-widget-reference/src/components/ValuedReferenceAutocomplete.tsx
@@ -235,7 +235,7 @@ export const ValuedReferenceAutocomplete = ({
       isOptionEqualToValue={(option, value) => option.id === value.id}
       onChange={handleAutocompleteChange}
       renderOption={(props: HTMLAttributes<HTMLLIElement>, option: GQLReferenceValue) => (
-        <li {...props}>
+        <li {...props} key={option.id}>
           <IconOverlay iconURL={option.iconURL} alt={option.kind} />
           <span className={classes.optionLabel} data-testid={`option-${option.label}`}>
             {option.label}
@@ -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