fix the console errors with autocomplete

linode · Oct 23, 2024 · 1a059c7 · 1a059c7
1 parent b78a5ad
commit 1a059c7
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 13 deletions.
diff --git a/packages/manager/src/components/ImageSelect/ImageOption.tsx b/packages/manager/src/components/ImageSelect/ImageOption.tsx
@@ -3,7 +3,6 @@ import React from 'react';
 import CloudInitIcon from 'src/assets/icons/cloud-init.svg';
 import DistributedRegionIcon from 'src/assets/icons/entityIcons/distributed-region.svg';
 import { useFlags } from 'src/hooks/useFlags';
-import { omitProps } from 'src/utilities/omittedProps';
 
 import { SelectedIcon } from '../Autocomplete/Autocomplete.styles';
 import { OSIcon } from '../OSIcon';
@@ -17,17 +16,15 @@ import type { Image } from '@linode/api-v4';
 interface Props {
   image: Image;
   isSelected: boolean;
-  listItemProps: React.HTMLAttributes<HTMLLIElement> & { key?: string };
+  listItemProps: Omit<React.HTMLAttributes<HTMLLIElement>, 'key'>;
 }
 
 export const ImageOption = ({ image, isSelected, listItemProps }: Props) => {
   const flags = useFlags();
-  // prevents spread key console error
-  const props = omitProps(listItemProps, ['key']);
 
   return (
     <li
-      {...props}
+      {...listItemProps}
       style={{
         display: 'flex',
         justifyContent: 'space-between',

diff --git a/packages/manager/src/components/ImageSelect/ImageSelect.tsx b/packages/manager/src/components/ImageSelect/ImageSelect.tsx
@@ -128,14 +128,18 @@ export const ImageSelect = (props: Props) => {
           <StyledList>{params.children}</StyledList>
         </li>
       )}
-      renderOption={(props, option, state) => (
-        <ImageOption
-          image={option}
-          isSelected={state.selected}
-          key={option.id}
-          listItemProps={props}
-        />
-      )}
+      renderOption={(props, option, state) => {
+        const { key, ...rest } = props;
+
+        return (
+          <ImageOption
+            image={option}
+            isSelected={state.selected}
+            key={key}
+            listItemProps={rest}
+          />
+        );
+      }}
       textFieldProps={{
         InputProps: {
           startAdornment: