diff --git a/frontend/src/components/AutocompleteClientLocation/index.tsx b/frontend/src/components/AutocompleteClientLocation/index.tsx index e5df98e0..4c4f1a7f 100644 --- a/frontend/src/components/AutocompleteClientLocation/index.tsx +++ b/frontend/src/components/AutocompleteClientLocation/index.tsx @@ -73,6 +73,8 @@ const AutocompleteClientLocation: React.ForwardRefExoticComponent(null); const [client, setClient] = useState(null); + const [valueTyped, setValueTyped] = useState(null); + const [locationName, setLocationName] = useState(null); const clearClient = () => { updateOptions("locations", []); @@ -83,9 +85,7 @@ const AutocompleteClientLocation: React.ForwardRefExoticComponent { - - const selectedItem = autocompleteEvent.selectedItem; + const selectClient = (selectedItem: AutocompleteProps) => { if (selectedItem) { setIsActive(true); setClient(selectedItem); @@ -93,12 +93,44 @@ const AutocompleteClientLocation: React.ForwardRefExoticComponent { + selectClient(autocompleteEvent.selectedItem) }; + // This is here because when deployed the ComboBox tends to fail to call the onChange + useEffect(() => { + // We use the useEffect to do a lookup on the clients options + // It will fill with the autocomplete triggering the fetchOptions + const selectedItem = options["clients"]?.find((item: AutocompleteProps) => item.label === valueTyped); + + // If there's text typed and we found a client based on the label selected, we select it + if(valueTyped && selectedItem){ + selectClient(selectedItem); + } + + // This also triggers the autocomplete to fetch the options + if(valueTyped) + fetchOptions(valueTyped, "clients") + },[valueTyped]); + + // This is here because when deployed the ComboBox tends to fail to call the onChange + useEffect(() => { + // We use the useEffect to do a lookup on the locations options + const selectedItem = options["locations"]?.find((item: AutocompleteProps) => item.label === locationName); + // If there's text typed and we found a location based on the label selected, we select it + if(locationName && selectedItem){ + // This triggers the location useEffect to set the value + setLocation(selectedItem); + } + }, [locationName]); + useImperativeHandle(ref, () => ({ reset: () => setLocation(null) })); + // Why do we keep this then? Because of the onChange start to work, this will work as it was intended useEffect(() => { setValue(location?.id ?? null); }, [location]); @@ -110,17 +142,18 @@ const AutocompleteClientLocation: React.ForwardRefExoticComponent fetchOptions(value, "clients")} + onInputChange={setValueTyped} onChange={handleClientChange} itemToElement={(item: AutocompleteProps) => item.label} helperText="Search by client name, number or acronym" items={options["clients"] || []} - titleText="Client" /> - + titleText="Client" + /> setLocation(item.selectedItem)} itemToElement={(item: AutocompleteProps) => item.label} items={options["locations"] || [{ id: "", label: "No results found" }]}