[material-ui][Autocomplete] Async server filtering not working

[RoseannePeeters]

Search keywords

Autocomplete Async server filtering not working.

Latest version

• I have tested the latest version

Steps to reproduce

Link to live example: I cannot provide this since it requires a backend, and I didn't find a free testing one that met my description for the test.

Steps:

1. Click on autocomplete
2. You see 14 items in there
3. Type in it to filter (server side)
   4). It does the request but old data stays, while only the filtered requests should show.

Current behavior

Old data is showing with new data on input.

Expected behavior

It should only show new data, aka the current state of customers

Context

I want this autocomplete to be able to filter server side.

Your environment

Hi all, I am making a Autocomplete component that will do server side filtering, so far I got all working but there is one problem

My code:

{customers && (
                <Autocomplete
                  multiple
                  id="async-customers"
                  onInputChange={handleCustomerSearchTermChange}
                  isOptionEqualToValue={(option, value) =>
                    option.username === value.username
                  }
                  getOptionSelected={(option, value) =>
                    option.username === value.username
                  }
                  getOptionLabel={(option) => option.username}
                  options={customers}
                  loading={isLoadingChangeCustomers}
                  filterOptions={(customers) => customers}
                  renderInput={(params) => (
                    <TextField
                      {...params}
                      label="Customers:"
                      variant="outlined"
                      InputProps={{
                        ...params.InputProps,
                        endAdornment: (
                          <>
                            {isLoadingChangeCustomers ? (
                              <CircularProgress color="inherit" size={20} />
                            ) : null}
                            {params.InputProps.endAdornment}
                          </>
                        ),
                      }}
                    />
                  )}
                />
              )}

On input change I fetch new results like so:

  const handleCustomerSearchTermChange = (e, newValue) => {
    setCustomerSearchTerm(newValue); // I know I should throttle this later, but this is for testing (and throtthlig doesn't make a difference as I tested)
  };

useEffect(() => {
    mutateChangeCustomers();
  }, [customerSearchTerm]);

  const {
    data: changeCustomers,
    error: errorChangeCustomers,
    isLoading: isLoadingChangeCustomers,
    mutate: mutateChangeCustomers,
  } = useSWR(`/admin/getChangeCustomers/${customerSearchTerm}`, getAll);

  useEffect(() => {
    if (changeCustomers) setCustomers(changeCustomers);

    console.log(changeCustomers);
  }, [changeCustomers]);

So I kinda found what the problem was:
When opening the Autocomplete it will always start off with 14 items, expected behaviour, but when typing in it, it will not remove those items instead it will just add the new items to the existing ones, which is very weird since the customers state is only holding new values.
The only way I found to make the old ones dissapear is by typing in a wrong searchTerm so that nothing gets shown in the dropdown and then backspacing to a correct searchTerm and then it only shows the filtered ones and not the old ones

[ZeeshanTamboli]

@RoseannePeeters Debugging the issue is challenging without a reproduction since there could be multiple reasons for it. Would you be able to mock the API call and attempt to reproduce the issue?

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.