Fix(frontend): Fixed a bug where you weren't able to use the autocomp…

…lete feature
The-Creative-Programming-Group · Jan 5, 2024 · 1385ea7 · 1385ea7 · vercel · Jan 5, 2024
1 parent 8daacd4
commit 1385ea7
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 14 deletions.
diff --git a/apps/web/src/pages/locationsettings/index.tsx b/apps/web/src/pages/locationsettings/index.tsx
@@ -197,7 +197,8 @@ const LocationSettings = observer(() => {
                     setIsInputActive(true);
                   }}
                   value={searchValue.name}
-                  onBlur={() => {
+                  onBlur={async () => {
+                    await new Promise((resolve) => setTimeout(resolve, 80));
                     setIsInputActive(false);
                   }}
                   onChange={(event) => {
@@ -227,7 +228,6 @@ const LocationSettings = observer(() => {
             </div>
             {results.map((city: ICity) => {
               if (
-                isInputActive &&
                 city.name
                   .toLowerCase()
                   .startsWith(searchValue.name.toLowerCase())
@@ -236,7 +236,7 @@ const LocationSettings = observer(() => {
                   <button
                     className={
                       isInputActive
-                        ? "flex h-auto w-9/12 items-center justify-between border-b-2 border-gray-400 bg-[#d8d5db] p-5 md:w-5/12"
+                        ? "flex h-auto w-9/12 items-center justify-between border-b-2 border-gray-400 bg-[#d8d5db] p-5 text-left md:w-5/12"
                         : "hidden"
                     }
                     aria-label={city.name}
@@ -255,12 +255,9 @@ const LocationSettings = observer(() => {
                           },
                         };
                       });
-                      setIsInputActive(false);
-                      inputRef.current?.blur();
-                      // console.log(searchValue);
                     }}
                   >
-                    <span className="w-1/2 text-left">
+                    <span className="w-1/2">
                       {city.name
                         .split("")
                         .map((letter: string, letterIndex: number) => (
@@ -278,7 +275,7 @@ const LocationSettings = observer(() => {
                     </span>
                     <div className="flex w-1/2 flex-row-reverse items-center gap-0.5 sm:w-1/4 sm:gap-3">
                       <span className="text-gray-500">{city.country}</span>
-                      <span className="w-2/3 overflow-hidden overflow-ellipsis text-left text-gray-500 sm:w-full">
+                      <span className="w-2/3 overflow-hidden overflow-ellipsis text-gray-500 sm:w-full">
                         {city.region}
                       </span>{" "}
                     </div>

diff --git a/apps/web/src/pages/search/index.tsx b/apps/web/src/pages/search/index.tsx
@@ -187,7 +187,8 @@ const Search = () => {
               setIsInputActive(true);
             }}
             value={searchValue.name}
-            onBlur={() => {
+            onBlur={async () => {
+              await new Promise((resolve) => setTimeout(resolve, 80));
               setIsInputActive(false);
             }}
             onChange={(event) => {
@@ -218,14 +219,13 @@ const Search = () => {
       <div className="flex flex-col items-center">
         {results.map((city: ICity) => {
           if (
-            isInputActive &&
             city.name.toLowerCase().startsWith(searchValue.name.toLowerCase())
           ) {
             return (
               <button
                 className={
                   isInputActive
-                    ? "z-20 flex h-auto w-9/12 items-center justify-between border-b-2 border-gray-400 bg-[#383b53] p-5 text-amber-50 md:w-6/12"
+                    ? "z-20 flex h-auto w-9/12 items-center justify-between border-b-2 border-gray-400 bg-[#383b53] p-5 text-left text-amber-50 md:w-6/12"
                     : "hidden"
                 }
                 aria-label={city.name}
@@ -244,8 +244,6 @@ const Search = () => {
                       },
                     };
                   });
-                  setIsInputActive(false);
-                  inputRef.current?.blur();
                 }}
               >
                 <span>
@@ -266,7 +264,7 @@ const Search = () => {
                 </span>
                 <div className="flex w-1/2 flex-row-reverse items-center gap-0.5 sm:w-1/4 sm:gap-3">
                   <span>{city.country}</span>
-                  <span className="w-2/3 overflow-hidden overflow-ellipsis text-left sm:w-full">
+                  <span className="w-2/3 overflow-hidden overflow-ellipsis sm:w-full">
                     {city.region}
                   </span>{" "}
                 </div>