From 9de1c79da6110df752711b1ee8188066b56ba978 Mon Sep 17 00:00:00 2001
From: Mo Tarbin <mhed.t91@gmail.com>
Date: Wed, 15 Jan 2025 02:03:28 -0500
Subject: [PATCH] Update IconButtonWithMenu to use shorter prop name to not
 conflict with the react key

---
 src/views/Chores/IconButtonWithMenu.jsx | 8 ++++----
 src/views/Chores/MyChores.jsx           | 9 +++------
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/views/Chores/IconButtonWithMenu.jsx b/src/views/Chores/IconButtonWithMenu.jsx
index 2ad1706..8d627b7 100644
--- a/src/views/Chores/IconButtonWithMenu.jsx
+++ b/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)
diff --git a/src/views/Chores/MyChores.jsx b/src/views/Chores/MyChores.jsx
index 16e0055..21f5e79 100644
--- a/src/views/Chores/MyChores.jsx
+++ b/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}