- Moved the touching area on the whole grocery card not just on the text

components/pages/grocery/EditGroceryItem.tsx

@@ -68,7 +68,7 @@ const EditGroceryItem = ({
   );
 
     const handleClose = () => {
-        setGrocery(defaultGroceryItem);
+        closeEdit();
     }
 
   const handleSubmit = () => {

components/pages/grocery/GroceryItem.tsx

@@ -39,6 +39,7 @@ const GroceryItem = ({
     return `${firstName.charAt(0).toUpperCase()}${lastName.charAt(0).toUpperCase()}`;
   };
 
+  const isEditable = (isParent || isCaregiver) && item.approved && !item.bought;
   return (
     <View
       key={item.id}
@@ -49,6 +50,7 @@ const GroceryItem = ({
         overflow: "hidden",
       }}
     >
+      <TouchableOpacity onPress={isEditable ? () => setIsEditingTitle(true) : null}>
         <View
           row
           spread
@@ -65,7 +67,6 @@ const GroceryItem = ({
             item={item}
             onClose={() => setOpenFreqEdit(false)}
           />
-
           {isEditingTitle ? (
             <EditGroceryItem
               editGrocery={item}
@@ -75,7 +76,6 @@ const GroceryItem = ({
           ) : (
             <View flex>
               {(isParent || isCaregiver) && !item.bought ? (
-              <TouchableOpacity onPress={() => setIsEditingTitle(true)}>
                   <Text
                     text70T
                     style={[
@@ -87,7 +87,6 @@ const GroceryItem = ({
                   >
                     {item.title}
                   </Text>
-              </TouchableOpacity>
               ) : (
                 <Text
                   text70T
@@ -152,6 +151,7 @@ const GroceryItem = ({
             )
           )}
         </View>
+      </TouchableOpacity>
 
       {!item.approved && (
         <>