From 0c8679c66e9f9c35c9214554db15934d44f082da Mon Sep 17 00:00:00 2001
From: Chris Callendar <chriscallendar@gmail.com>
Date: Tue, 16 Jul 2024 18:36:49 -0700
Subject: [PATCH] fix: Search input clear event

---
 .../src/pages/map/components/SearchInput.tsx  | 47 +++++++++----------
 1 file changed, 22 insertions(+), 25 deletions(-)

diff --git a/frontend/src/pages/map/components/SearchInput.tsx b/frontend/src/pages/map/components/SearchInput.tsx
index cd26b54d..157b103b 100644
--- a/frontend/src/pages/map/components/SearchInput.tsx
+++ b/frontend/src/pages/map/components/SearchInput.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { Autocomplete, InputAdornment, TextField } from '@mui/material'
 import { LatLngTuple } from 'leaflet'
@@ -79,8 +79,7 @@ export function SearchInput() {
     }, delay)
   }
 
-  const onTextChange = (ev: ChangeEvent<HTMLInputElement>) => {
-    const newValue = ev.target.value
+  const onTextChange = (_ev: any, newValue: string) => {
     setValue(newValue)
     currentValueRef.current = newValue
     delayedSearch(newValue)
@@ -112,32 +111,31 @@ export function SearchInput() {
 
   return (
     <Autocomplete
-      renderInput={(params) => {
-        return (
-          <TextField
-            {...params}
-            InputProps={{
-              ...params.InputProps,
-              startAdornment: (
-                <InputAdornment position="start">
-                  <SearchIcon title="Search icon" className="map-search-icon" />
-                </InputAdornment>
-              ),
-            }}
-            placeholder="Search"
-            variant="outlined"
-            className="map-search-input"
-            sx={styles}
-            value={value}
-            onChange={onTextChange}
-          />
-        )
-      }}
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          InputProps={{
+            ...params.InputProps,
+            startAdornment: (
+              <InputAdornment position="start">
+                <SearchIcon title="Search icon" className="map-search-icon" />
+              </InputAdornment>
+            ),
+          }}
+          placeholder="Search"
+          variant="outlined"
+          className="map-search-input"
+          sx={styles}
+          value={value}
+        />
+      )}
       options={options}
       loading={loading}
       open={open}
       onOpen={() => setOpen(true)}
       onClose={() => setOpen(false)}
+      onInputChange={onTextChange}
+      onChange={onAutocompleteChange}
       filterOptions={(options: SearchOption[]) => options}
       getOptionKey={(option: string | SearchOption) =>
         typeof option === 'string' ? option : option.id
@@ -151,7 +149,6 @@ export function SearchInput() {
         return <SearchResultItem key={key} option={option} {...optionProps} />
       }}
       componentsProps={componentProps}
-      onChange={onAutocompleteChange}
     />
   )
 }