From 5abc800eda608436eb30f75ffa979845766613a2 Mon Sep 17 00:00:00 2001
From: miteshsavani <mitesh.savani810@gmail.com>
Date: Thu, 11 Jan 2024 05:55:32 +0530
Subject: [PATCH] Fixed showing empty input error message on pressing Search
 button/ (#400)

- App was not showing "Search bar is Empty..." error message when user perform search on slang which is not present in database and user clear the input box and press Search button.
---
 src/components/form.jsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/form.jsx b/src/components/form.jsx
index 946c63d..916fdd4 100644
--- a/src/components/form.jsx
+++ b/src/components/form.jsx
@@ -6,7 +6,7 @@ const Form = () => {
   const [error, setError] = useState(false);
   const [errorMessage, setErrorMessage] = useState(false);
   const [userInput, setUserInput] = useState("");
-  const [isUserInputBlank, setIsUserInputBlank] = useState(true);
+  const [isUserInputBlank, setIsUserInputBlank] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const previousUserInput = useRef(undefined);
   const hasUserInputChanged = previousUserInput.current !== userInput;
@@ -63,8 +63,6 @@ const Form = () => {
     if (!isUserInputBlank) {
       previousUserInput.current = userInput;
     }
-
-    clearDataBeforeFetch();
   }, [userInput]);
 
   return (
@@ -107,9 +105,10 @@ const Form = () => {
                 placeholder="Search slang full meaning..."
                 className="flex-1 w-[14rem] h-6 ml-2 border-none outline-none placeholder:text-black bg-ash"
                 value={userInput}
-                onChange={(e) =>
-                  setUserInput(e.target.value.toLocaleLowerCase())
-                }
+                onChange={(e) => {
+                  clearDataBeforeFetch();
+                  setUserInput(e.target.value.toLocaleLowerCase());
+                }}
               />
             </div>