fix: Location input now properly auto selects on Enter key pressed

211-Connect · Oct 16, 2024 · fbfa521 · fbfa521
1 parent f81ce24
commit fbfa521
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/src/shared/components/search/location-search-bar.tsx b/src/shared/components/search/location-search-bar.tsx
@@ -4,9 +4,9 @@ import { useAtomValue, useSetAtom } from 'jotai';
 import {
   prevSearchLocationAtom,
   searchAtom,
+  searchCoordinatesAtom,
   searchLocationAtom,
   searchLocationValidationErrorAtom,
-  userCoordinatesAtom,
 } from '../../store/search';
 import { useDebounce } from '../../hooks/use-debounce';
 import { useLocations } from '../../hooks/api/use-locations';
@@ -26,7 +26,7 @@ export function LocationSearchBar({ className }: LocationSearchBarProps) {
   const [shouldSearch, setShouldSearch] = useState(false);
   const setSearch = useSetAtom(searchAtom);
   const searchLocation = useAtomValue(searchLocationAtom);
-  const coords = useAtomValue(userCoordinatesAtom);
+  const coords = useAtomValue(searchCoordinatesAtom);
   const prevSearchLocation = useAtomValue(prevSearchLocationAtom);
   const debouncedSearchLocation = useDebounce(searchLocation, 200);
   const { data: locations } = useLocations(
@@ -106,6 +106,7 @@ export function LocationSearchBar({ className }: LocationSearchBarProps) {
         let isNewCoords = false;
         const coordinates = coords.coordinates;
         if (
+          coords.type === 'invalid' ||
           (coords.type === 'coordinates' &&
             coordinates?.[0] !== prev['userCoordinates']?.[0] &&
             coordinates?.[1] !== prev['userCoordinates']?.[1]) ||
@@ -165,7 +166,7 @@ export function LocationSearchBar({ className }: LocationSearchBarProps) {
           onInputChange={handleInputChange}
           onValueChange={setSearchLocation}
           value={searchLocation}
-          autoSelectIndex={coords ? undefined : 1}
+          autoSelectIndex={coords?.length === 2 ? undefined : 1}
         />
 
         <DistanceSelect />

diff --git a/src/shared/components/ui/autocomplete.tsx b/src/shared/components/ui/autocomplete.tsx
@@ -264,12 +264,21 @@ export function Autocomplete(props: AutocompleteProps) {
             onInputChange?.(currentOption.value);
             setLastManualInput(currentOption.value);
           } else if (autoSelectIndex != null) {
+            e.preventDefault();
             const defaultOption = rest.options[autoSelectIndex];
             if (defaultOption) {
               onInputChange?.(defaultOption.value);
               setValue(defaultOption.value);
               setLastManualInput(defaultOption.value);
             }
+            const form = (e.target as HTMLElement).closest('form');
+            if (form) {
+              setTimeout(() => {
+                form.dispatchEvent(
+                  new Event('submit', { cancelable: true, bubbles: true }),
+                );
+              }, 0);
+            }
           }
           setCurrentIndex(-1);
         }