Update IconButtonWithMenu to use shorter prop name to not conflict with the react key

src/views/Chores/IconButtonWithMenu.jsx

@@ -5,7 +5,7 @@ import { getTextColorFromBackgroundColor } from '../../utils/Colors.jsx'
 
 const IconButtonWithMenu = ({
   label,
-  key,
+  k,
   icon,
   options,
   onItemSelect,
@@ -72,14 +72,14 @@ const IconButtonWithMenu = ({
       )}
 
       <Menu
-        key={key}
+        key={k}
         ref={menuRef}
         anchorEl={anchorEl}
         open={Boolean(anchorEl)}
         onClose={handleMenuClose}
       >
         {title && (
-          <MenuItem key={`${key}-title`} disabled>
+          <MenuItem key={`${k}-title`} disabled>
             <Typography level='body-sm' sx={{ fontWeight: 'bold' }}>
               {title}
             </Typography>
@@ -87,7 +87,7 @@ const IconButtonWithMenu = ({
         )}
         {options?.map(item => (
           <MenuItem
-            key={`${key}-${item?.id}`}
+            key={`${k}-${item?.id}`}
             onClick={() => {
               onItemSelect(item)
               setSelectedItem?.selectedItem(item.name)

src/views/Chores/MyChores.jsx

@@ -420,11 +420,7 @@ const MyChores = () => {
                 setActiveTextField('search')
                 setSearchInputFocus(searchInputFocus + 1)
 
-                searchInputRef.current.focus()
-                searchInputRef.current.selectionStart =
-                  searchInputRef.current.value?.length
-                searchInputRef.current.selectionEnd =
-                  searchInputRef.current.value?.length
+                searchInputRef?.current?.focus()
               }}
             >
               <Search />
@@ -434,6 +430,7 @@ const MyChores = () => {
 
           <IconButtonWithMenu
             title='Group by'
+            key={'icon-menu-group-by'}
             icon={<Sort />}
             options={[
               { name: 'Due Date', value: 'due_date' },
@@ -456,7 +453,7 @@ const MyChores = () => {
             <div className='grid flex-1 grid-cols-3 gap-4'>
               <IconButtonWithMenu
                 label={' Priority'}
-                key={'icon-menu-labels-filter'}
+                key={'icon-menu-priority-filter'}
                 icon={<PriorityHigh />}
                 options={Priorities}
                 selectedItem={selectedFilter}