I have a React component where I use the Autocomplete component from the Material UI AutoComplete API
const [client, setClient] = useState<Client | null>(null);
useEffect(() => {
if (!command) {
return;
}
setClient(team.client);
}, [command]);
const handleChangeClient = async (newClient: Client | null) => {
if (!newClient) {
return;
}
setIsLoadingNewClient(true);
try {
const url = "test-url";
const response = await axios.patch(
url,
{
accountId: newClient.id,
},
{
headers: getAuthHeaders(),
}
);
if (response.status === HttpStatusCode.Ok) {
setClient(newClient);
}
} catch (error: any) {
testHandleError()
} finally {
setIsLoadingNewClient(false);
}
};
<CustomAutocomplete
loading={
isLoadingAvailableClients
}
loadingText="Loading..."
size="small"
options={availableClients}
value={owner}
onChange={(e, value) =>
handleChangeOwner(value)
}
renderOption={(
props,
option
) => (
<li
{...props}
value={option.accountId}
key={option.accountId}
>
{option.firstName}
{option.lastName}
</li>
)}
getOptionLabel={(member) =>
`${member.firstName} ${member.lastName} (${member.email})`
}
renderInput={(params) => (
<TextField
{...params}
label="Select Client"
variant="outlined"
InputProps={{
...params.InputProps,
endAdornment: (
<>
{isLoadingNewClient ? (
<CircularProgress
color="inherit"
size={
20
}
/>
) : null}
{
params
.InputProps
.endAdornment
}
</>
),
}}
/>
)}
/>
I can’t find anywhere whether it is possible to call an asynchronous function on onChange in Autocomplete and only change the value in Autocomplete as a result of its operation, or not change it as a result of an error. Now for some reason the value still changes regardless of whether I received a 200 status or caught an error in the catch block
code just to understand the context
Ali is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.