fix: 🐛 [Select] Keys for options on top level component

✅ Closes: 248
melfore · May 3, 2022 · b6e7da7 · b6e7da7
1 parent e3a2666
commit b6e7da7
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 1 deletion.
diff --git a/src/components/Select/components/Option/index.tsx b/src/components/Select/components/Option/index.tsx
@@ -74,7 +74,7 @@ const SelectOption = <T extends any>({
   }, [checkboxDataCy, customContent, labelDataCy, optionLabel, multiple, selected]);
 
   return (
-    <li key={optionDataCy} data-cy={optionDataCy} {...forwarded}>
+    <li data-cy={optionDataCy} {...forwarded}>
       {content}
     </li>
   );

diff --git a/src/components/Select/index.tsx b/src/components/Select/index.tsx
@@ -204,8 +204,10 @@ const Select = <T extends any>({
 
   const renderOption = useCallback(
     (props: HTMLAttributes<HTMLLIElement>, option: T, { selected }: MUIAutocompleteRenderOptionState) => {
+      const { id: key } = props;
       return (
         <SelectOption
+          key={key}
           customRenderer={renderCustomOption}
           dataCy={dataCy}
           forwarded={props}