From 5c3c74b32e49adf630cdb496c3bff96d4e9a3cd5 Mon Sep 17 00:00:00 2001
From: Anika Raemer <araemer@laptop-anika.raemer.net>
Date: Sun, 14 Sep 2025 14:24:35 +0200
Subject: [PATCH] fix search field behavior

---
 frontend/src/App.css                          | 10 +++++-----
 .../src/components/basics/SearchField.tsx     | 20 +++++++++++--------
 .../src/components/recipes/RecipeListItem.tsx |  2 +-
 .../src/components/recipes/RecipeListPage.tsx |  2 +-
 4 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 79dc4f9..0877dae 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -28,6 +28,10 @@
     @apply font-semibold mb-2 mt-4;
   }
 
+  .label {
+    @apply text-gray-600
+  }
+
   /* buttons */
   .primary-button {
     @apply bg-blue-300 px-4 py-2 shadow-md rounded-lg hover:bg-blue-400 text-gray-600 whitespace-nowrap
@@ -41,15 +45,11 @@
     @apply bg-gray-600  hover:bg-gray-800 text-white shadow-md rounded px-4 py-2 whitespace-nowrap
   }
 
-  /* input field */
+  /* input fields like input and textarea */
   .input-field {
     @apply p-2 w-full border rounded-md placeholder-gray-400 border-gray-600 hover:border-blue-600 transition-colors text-gray-600 focus:outline-none focus:border-blue-800;
   }
 
-  .text-area {
-    @apply border p-2 w-full mb-2 rounded placeholder-gray-400;
-  }
-
   /* groups */
   .button-group{
     @apply flex gap-4 mt-4;
diff --git a/frontend/src/components/basics/SearchField.tsx b/frontend/src/components/basics/SearchField.tsx
index acce6a7..3f60b41 100644
--- a/frontend/src/components/basics/SearchField.tsx
+++ b/frontend/src/components/basics/SearchField.tsx
@@ -1,8 +1,9 @@
+import { useState } from "react";
+
 /**
  * Custom search field component including a clear search functionality
  */
 type SearchFieldProps = { 
-    searchString : string
     onSearchStringChanged: (searchString : string) => void
 }
 
@@ -10,10 +11,13 @@ type SearchFieldProps = {
  * @param SearchFieldProps consisting of an initial searchString and an onSearchStringChanged handler
  * @returns Custom search field component
  */
-export default function SearchField({searchString, onSearchStringChanged} : SearchFieldProps){
-    const setSearchString = (newSearchString : string) => {
-        searchString = newSearchString;
-        onSearchStringChanged(searchString)
+export default function SearchField({onSearchStringChanged} : SearchFieldProps){
+    const [currentSearchString, setCurrentSearchString] = useState<string>("")
+    
+    const changeSearchString = (newSearchString : string) => {
+        console.log(newSearchString);
+        setCurrentSearchString(newSearchString);
+        onSearchStringChanged(newSearchString)
     }
 
     return (
@@ -26,15 +30,15 @@ export default function SearchField({searchString, onSearchStringChanged} : Sear
             className="input-field pl-10 pr-10"
             type="text"
             placeholder="Search"
-            value={searchString}
-            onChange={ e => setSearchString(e.target.value) }
+            value={currentSearchString}
+            onChange={ e => changeSearchString(e.target.value) }
         />
         {/* Right icon: X 
             Clears search string on click
           */}
         <button 
             className="absolute right-0 inset-y-0 flex items-center"
-            onClick = { () => setSearchString("") }
+            onClick = { () => changeSearchString("") }
         >
             <svg
             xmlns="http://www.w3.org/2000/svg"
diff --git a/frontend/src/components/recipes/RecipeListItem.tsx b/frontend/src/components/recipes/RecipeListItem.tsx
index 1f892f4..76d13ee 100644
--- a/frontend/src/components/recipes/RecipeListItem.tsx
+++ b/frontend/src/components/recipes/RecipeListItem.tsx
@@ -3,7 +3,7 @@ import { Link } from "react-router-dom"
 type RecipeListItemProps = {
   title: string
   targetPath: string
-    imageUrl?: string
+  imageUrl?: string
 }
 
 /**
diff --git a/frontend/src/components/recipes/RecipeListPage.tsx b/frontend/src/components/recipes/RecipeListPage.tsx
index bb80557..aae2dbf 100644
--- a/frontend/src/components/recipes/RecipeListPage.tsx
+++ b/frontend/src/components/recipes/RecipeListPage.tsx
@@ -46,7 +46,7 @@ export default function RecipeListPage() {
           <h1 className="content-title text-blue-900">Recipes</h1>
           <div className="flex columns-4 content-stretch gap-2 items-center">
             {/* Number of recipes inlist */}
-            <label className="text-gray-500 w-2/3">{recipeList.length} Recipes</label>
+            <label className="label w-2/3">{recipeList.length} Recipes</label>
             {/* Search field */}
             <SearchField 
               searchString=""