From 8c24425e03f4e2875e5ce758f37c9335de5e9ffc Mon Sep 17 00:00:00 2001
From: fred <fred@fredzernia.com>
Date: Thu, 21 Aug 2025 09:54:27 -0700
Subject: [PATCH] better handling of textbox focus for mobile

---
 backend/src/models/recipeModel.ts             |  7 ++-
 .../src/components/AddBulkIngredients.tsx     | 56 ++++++++++++++++---
 frontend/src/components/AddBulkSteps.tsx      | 45 +++++++++++----
 3 files changed, 88 insertions(+), 20 deletions(-)

diff --git a/backend/src/models/recipeModel.ts b/backend/src/models/recipeModel.ts
index dd81ae4..a2f6407 100644
--- a/backend/src/models/recipeModel.ts
+++ b/backend/src/models/recipeModel.ts
@@ -12,7 +12,7 @@ class RecipeModel {
 
   async getAllRecipes(): Promise<any[]> {
     try {
-      logger.info("index page view")
+      logger.info("index page view");
       return await this.prisma.recipes.findMany();
     } catch (err) {
       console.error("Error fetching all recipes:", err);
@@ -46,7 +46,10 @@ class RecipeModel {
           instruction: step.instruction,
         })),
       };
-      logger.info("recipe page view", { recipe_id: data.details.id, recipe_name: data.details.name })
+      logger.info("recipe page view", {
+        recipe_id: data.details.id,
+        recipe_name: data.details.name,
+      });
       return data;
     } catch (err) {
       console.log("Error finding recipe:", err);
diff --git a/frontend/src/components/AddBulkIngredients.tsx b/frontend/src/components/AddBulkIngredients.tsx
index 87cb39b..41b2c7b 100644
--- a/frontend/src/components/AddBulkIngredients.tsx
+++ b/frontend/src/components/AddBulkIngredients.tsx
@@ -1,20 +1,23 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
 
 interface AddBulkIngredientsProps {
   ingredients: string[];
   onChange?: (ingredients: string[]) => void;
 }
 
-const AddBulkIngredients: React.FC<AddBulkIngredientsProps> = ({ ingredients, onChange }) => {
-  const [textValue, setTextValue] = useState<string>('');
+const AddBulkIngredients: React.FC<AddBulkIngredientsProps> = ({
+  ingredients,
+  onChange,
+}) => {
+  const [textValue, setTextValue] = useState<string>("");
 
   useEffect(() => {
-    const textRepresentation = ingredients.join('\n');
+    const textRepresentation = ingredients.join("\n");
     setTextValue(textRepresentation);
   }, [ingredients]);
 
   const parseAndUpdate = (value: string) => {
-    const lines = value.split('\n').filter(line => line.trim() !== '');
+    const lines = value.split("\n").filter((line) => line.trim() !== "");
 
     if (onChange) onChange(lines);
   };
@@ -24,24 +27,63 @@ const AddBulkIngredients: React.FC<AddBulkIngredientsProps> = ({ ingredients, on
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === 'Enter') {
+    if (e.key === "Enter") {
       parseAndUpdate(textValue);
     }
   };
 
   const handleBlur = () => {
     parseAndUpdate(textValue);
+    document.body.style.overflow = "";
+    removeTouchListeners();
+  };
+
+  const manageOverflow = () => {
+    const lineCount = textValue
+      .split("\n")
+      .filter((line) => line.trim() !== "").length;
+    if (lineCount > 8) {
+      document.body.style.overflow = "hidden";
+      addTouchListeners();
+    } else {
+      document.body.style.overflow = "";
+      removeTouchListeners();
+    }
+  };
+
+  const handleFocus = () => {
+    manageOverflow();
+  };
+
+  const handleTouchEnd = () => {
+    manageOverflow();
+  };
+
+  const addTouchListeners = () => {
+    window.addEventListener("touchmove", preventDefault, { passive: false });
+  };
+
+  const removeTouchListeners = () => {
+    window.removeEventListener("touchmove", preventDefault);
+  };
+
+  const preventDefault = (e: TouchEvent) => {
+    e.preventDefault();
   };
 
   return (
     <div>
-      <h3 className="text-xl font-bold text-[var(--color-secondaryTextDark)]">Ingredients:</h3>
+      <h3 className="text-xl font-bold text-[var(--color-secondaryTextDark)]">
+        Ingredients:
+      </h3>
       <textarea
         rows={8}
         value={textValue}
         onChange={handleInputChange}
         onKeyDown={handleKeyDown}
         onBlur={handleBlur}
+        onFocus={handleFocus}
+        onTouchEnd={handleTouchEnd}
         placeholder="Enter ingredients separated by new line"
         className="mb-4 p-2 border border-[var(--color-primaryBorder)] rounded w-full"
       />
diff --git a/frontend/src/components/AddBulkSteps.tsx b/frontend/src/components/AddBulkSteps.tsx
index 874c685..8839c56 100644
--- a/frontend/src/components/AddBulkSteps.tsx
+++ b/frontend/src/components/AddBulkSteps.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
 
 interface Step {
   step_number: number;
@@ -11,12 +11,12 @@ interface AddBulkStepsProps {
 }
 
 const AddBulkSteps: React.FC<AddBulkStepsProps> = ({ steps, onChange }) => {
-  const [textValue, setTextValue] = useState<string>('');
+  const [textValue, setTextValue] = useState<string>("");
 
   useEffect(() => {
-    const textRepresentation = steps.map(step =>
-      `${step.instruction}`
-    ).join('\n');
+    const textRepresentation = steps
+      .map((step) => `${step.instruction}`)
+      .join("\n");
     setTextValue(textRepresentation);
   }, [steps]);
 
@@ -24,36 +24,59 @@ const AddBulkSteps: React.FC<AddBulkStepsProps> = ({ steps, onChange }) => {
     setTextValue(e.target.value);
   };
 
-
   const parseAndUpdate = (value: string) => {
-    const lines = value.split('\n').filter(line => line.trim() !== '');
+    const lines = value.split("\n").filter((line) => line.trim() !== "");
 
     const parsedSteps: Step[] = lines.map((line, idx) => {
-      return { step_number: idx + 1, instruction: line }
-    })
+      return { step_number: idx + 1, instruction: line };
+    });
 
     if (onChange) onChange(parsedSteps);
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === 'Enter') {
+    if (e.key === "Enter") {
       parseAndUpdate(textValue);
     }
   };
 
   const handleBlur = () => {
     parseAndUpdate(textValue);
+    document.body.style.overflow = "";
+  };
+
+  const manageOverflow = () => {
+    const lineCount = textValue
+      .split("\n")
+      .filter((line) => line.trim() !== "").length;
+    if (lineCount > 8) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+  };
+
+  const handleFocus = () => {
+    manageOverflow();
+  };
+
+  const handleTouchEnd = () => {
+    manageOverflow();
   };
 
   return (
     <div>
-      <h3 className="text-xl font-bold text-[var(--color-secondaryTextDark)]">Steps:</h3>
+      <h3 className="text-xl font-bold text-[var(--color-secondaryTextDark)]">
+        Steps:
+      </h3>
       <textarea
         rows={8}
         value={textValue}
         onChange={handleInputChange}
         onKeyDown={handleKeyDown}
         onBlur={handleBlur}
+        onFocus={handleFocus}
+        onTouchEnd={handleTouchEnd}
         placeholder="Enter steps separated by new line"
         className="mb-4 p-2 border border-[var(--color-primaryBorder)] rounded w-full"
       />