2129 prevent hitting return while search is loading

client/src/components/FoodSeeker/AddressDropDown.jsx

@@ -23,10 +23,11 @@ export default function AddressDropDown({ autoFocus }) {
     searchCoordinates?.locationName || ""
   );
   const [open, setOpen] = useState(true);
-  const { mapboxResults, fetchMapboxResults } = useMapboxGeocoder();
+  const { mapboxResults, fetchMapboxResults, isLoading } = useMapboxGeocoder();
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
   const { flyTo } = useMapbox();
+  const [highlightedOption, setHighlightedOption] = useState(null);
 
   const handleInputChange = (delta) => {
     if (!delta) return;
@@ -121,16 +122,21 @@ export default function AddressDropDown({ autoFocus }) {
   };
 
   const handleKeyDown = (event) => {
-    if (event.key === "Enter" && mapboxResults.length > 0) {
+    if (event.key === "Enter" && mapboxResults.length > 0 && !isLoading) {
       event.preventDefault();
-      handleAutocompleteOnChange(mapboxResults[0].place_name);
+      const selected = highlightedOption ?? mapboxResults[0].place_name;
+      handleAutocompleteOnChange(selected);
     }
   };
   return (
     <>
       <Autocomplete
+        disableCloseOnSelect
         autoHighlight
         onInputChange={(value) => handleInputChange(value)}
+        onHighlightChange={(_event, option) => {
+          setHighlightedOption(option);
+        }}
         freeSolo
         inputValue={inputVal}
         open={open}

client/src/components/FoodSeeker/Home.jsx

@@ -150,8 +150,6 @@ const Home = () => {
               })}
             >
               <Box
-                component="form"
-                onSubmit={() => navigate("/organizations")}
                 sx={(theme) => ({
                   width: "100%",
                   marginTop: theme.spacing(1),

client/src/hooks/useMapboxGeocoder.js

@@ -5,7 +5,7 @@ import {
   MAPBOX_ACCESS_TOKEN,
   DEFAULT_VIEWPORTS,
 } from "helpers/Constants";
-import { useReducer } from "react";
+import { useCallback, useReducer } from "react";
 
 const baseUrl = `https://api.mapbox.com/geocoding/v5/mapbox.places`;
 
@@ -46,25 +46,30 @@ export function useMapboxGeocoder() {
     initialState
   );
 
-  const fetchMapboxResults = debounce(
-    async (searchString) => {
+  const debouncedFetch = useCallback(
+    debounce(
+      async (searchString) => {
+        const bbox = DEFAULT_VIEWPORTS[TENANT_ID].bbox;
+        const mapboxUrl = `${baseUrl}/${searchString}.json?bbox=${bbox}&access_token=${MAPBOX_ACCESS_TOKEN}`;
 
-      const bbox = DEFAULT_VIEWPORTS[TENANT_ID].bbox;
-      const mapboxUrl = `${baseUrl}/${searchString}.json?bbox=${bbox}&access_token=${MAPBOX_ACCESS_TOKEN}`;
-
-      dispatch({ type: actionTypes.FETCH_REQUEST });
-      try {
-        const response = await axios.get(mapboxUrl);
-        dispatch({
-          type: actionTypes.FETCH_SUCCESS,
-          results: response.data.features,
-        });
-      } catch (error) {
-        dispatch({ type: actionTypes.FETCH_FAILURE, error });
-      }
-    },
-    { wait: 300, after: false, before: true }
+        try {
+          const response = await axios.get(mapboxUrl);
+          dispatch({
+            type: actionTypes.FETCH_SUCCESS,
+            results: response.data.features,
+          });
+        } catch (error) {
+          dispatch({ type: actionTypes.FETCH_FAILURE, error });
+        }
+      },
+      { wait: 300 }
+    ),
+    []
   );
+  const fetchMapboxResults = useCallback((searchString) => {
+    dispatch({ type: actionTypes.FETCH_REQUEST });
+    debouncedFetch(searchString);
+  }, []);
 
   return { error, isLoading, mapboxResults, fetchMapboxResults };
 }