ISSUE 5: fix location input not displaying typed in text

src/components/CustomStaticLocationAutoCompleteV2.jsx

@@ -5,37 +5,51 @@ import { useController } from "react-hook-form";
 import LocationIcon from "./frontend/icons/LocationIcon";
 import { GlobalContext } from "@/globalContext";
 
-export default function CustomStaticLocationAutoCompleteV2({ type, control, name, setValue, onClear, className, containerClassName, hideIcons, suggestionType, ...restProps }) {
+export default function CustomStaticLocationAutoCompleteV2({
-  const { dispatch: globalDispatch, state: globalState } = useContext(GlobalContext);
+  type,
+  control,
+  name,
+  setValue,
+  onClear,
+  className,
+  containerClassName,
+  hideIcons,
+  suggestionType,
+  ...restProps
+}) {
+  const { dispatch: globalDispatch, state: globalState } =
+    useContext(GlobalContext);
   const [location, setLocation] = useState(globalState.location);
 
-  
+  const { placePredictions, getPlacePredictions, isPlacePredictionsLoading } =
-  const { placePredictions, getPlacePredictions, isPlacePredictionsLoading } = usePlacesService({
+    usePlacesService({
-    apiKey: import.meta.env.VITE_GOOGLE_API_KEY,
+      apiKey: import.meta.env.VITE_GOOGLE_API_KEY,
-    options: { types: suggestionType ?? ["(region)"] },
+      options: { types: suggestionType ?? ["(region)"] },
-    debounce: 200,
+      debounce: 200,
-  });
+    });
   return (
     <Combobox
       as={"div"}
-      className={`relative w-full normal-case z-100 ${containerClassName ?? ""}`}
+      className={`z-100 relative w-full normal-case ${
+        containerClassName ?? ""
+      }`}
       value={location}
     >
       {!hideIcons && <LocationIcon />}
 
       <Combobox.Input
         {...restProps}
-        autoComplete="off"
+        autoComplete='off'
         className={`w-full truncate text-black ${className ?? ""}`}
-        value={globalState.location}
+        value={location}
         onChange={(evt) => {
-          setLocation(evt.target.value)
+          setLocation(evt.target.value);
           getPlacePredictions({ input: evt.target.value });
         }}
       />
       {!hideIcons && globalState.location && (
         <button
-          type="button"
+          type='button'
           onClick={() => {
             setValue("");
             setLocation("");
@@ -49,56 +63,72 @@ export default function CustomStaticLocationAutoCompleteV2({ type, control, name
       )}
       <Transition
         as={Fragment}
-        enter="transition ease-out duration-100"
+        enter='transition ease-out duration-100'
-        enterFrom="transform opacity-0 scale-95"
+        enterFrom='transform opacity-0 scale-95'
-        enterTo="transform opacity-100 scale-100"
+        enterTo='transform opacity-100 scale-100'
-        leave="transition ease-in duration-75"
+        leave='transition ease-in duration-75'
-        leaveFrom="transform opacity-100 scale-100"
+        leaveFrom='transform opacity-100 scale-100'
-        leaveTo="transform opacity-0 scale-95"
+        leaveTo='transform opacity-0 scale-95'
       >
         {isPlacePredictionsLoading ? (
-          <div className="absolute left-0 right-0 top-full z-50 mt-2 flex w-full origin-top justify-center rounded-xl border bg-white py-8">
+          <div className='absolute left-0 right-0 top-full z-50 mt-2 flex w-full origin-top justify-center rounded-xl border bg-white py-8'>
             <svg
-              style={{ margin: "auto", background: "none", display: "block", shapeRendering: "auto" }}
+              style={{
-              width="36px"
+                margin: "auto",
-              height="36px"
+                background: "none",
-              viewBox="0 0 100 100"
+                display: "block",
-              preserveAspectRatio="xMidYMid"
+                shapeRendering: "auto",
+              }}
+              width='36px'
+              height='36px'
+              viewBox='0 0 100 100'
+              preserveAspectRatio='xMidYMid'
             >
               <path
-                fill="none"
+                fill='none'
-                stroke="#d0d5dd"
+                stroke='#d0d5dd'
-                strokeWidth="10"
+                strokeWidth='10'
-                strokeDasharray="42.76482137044271 42.76482137044271"
+                strokeDasharray='42.76482137044271 42.76482137044271'
-                d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40 C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z"
+                d='M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40 C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z'
-                strokeLinecap="round"
+                strokeLinecap='round'
                 style={{ transform: "scale(1)", transformOrigin: "50px 50px" }}
               >
                 <animate
-                  attributeName="stroke-dashoffset"
+                  attributeName='stroke-dashoffset'
-                  repeatCount="indefinite"
+                  repeatCount='indefinite'
-                  dur="1.6666666666666667s"
+                  dur='1.6666666666666667s'
-                  keyTimes="0;1"
+                  keyTimes='0;1'
-                  values="0;256.58892822265625"
+                  values='0;256.58892822265625'
                 ></animate>
               </path>
             </svg>
           </div>
         ) : (
           <Combobox.Options
-            className={`${placePredictions.length > 0 ? "py-2 shadow-lg ring-1" : ""
+            className={`${
-              } absolute left-0 right-0 top-full z-50 mt-2 w-full origin-top cursor-pointer divide-y divide-gray-100 rounded-xl bg-white ring-black ring-opacity-5 focus:outline-none`}
+              placePredictions.length > 0 ? "py-2 shadow-lg ring-1" : ""
+            } absolute left-0 right-0 top-full z-50 mt-2 w-full origin-top cursor-pointer divide-y divide-gray-100 rounded-xl bg-white ring-black ring-opacity-5 focus:outline-none`}
           >
             {placePredictions.map((place, idx) => (
               <Combobox.Option
-                className="flex w-full items-center truncate rounded-pill px-3 py-3 pr-5 text-sm ui-active:bg-gray-100 ui-active:text-black ui-not-active:text-gray-800"
+                className='flex w-full items-center truncate rounded-pill px-3 py-3 pr-5 text-sm ui-active:bg-gray-100 ui-active:text-black ui-not-active:text-gray-800'
                 key={idx}
                 value={place.structured_formatting.main_text}
-                onClick={() => 
+                onClick={() =>
-                  setValue(place?.structured_formatting.main_text + ', ' + place.structured_formatting?.secondary_text)
+                  setValue(
+                    place?.structured_formatting.main_text +
+                      ", " +
+                      place.structured_formatting?.secondary_text
+                  )
                 }
               >
-                <span>{`${place.structured_formatting.main_text} ${place.structured_formatting?.secondary_text ? "," : ""} ${place.structured_formatting?.secondary_text ? place.structured_formatting?.secondary_text : ""}`}</span>
+                <span>{`${place.structured_formatting.main_text} ${
+                  place.structured_formatting?.secondary_text ? "," : ""
+                } ${
+                  place.structured_formatting?.secondary_text
+                    ? place.structured_formatting?.secondary_text
+                    : ""
+                }`}</span>
               </Combobox.Option>
             ))}
           </Combobox.Options>