I am using AutoComplete MUI for my react vite project and I want to implement the feature that when an option is selected, the input text should be cleaned.

However, I am facing an issue that even I set the InputValue to empty, onInputChange still call back a function with non-empty input value. I expect onInputChange should give an empty input value.

Thank you

Here is the example code

import * as React from 'react';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import Autocomplete from '@mui/material/Autocomplete';
import Stack from '@mui/material/Stack';

export default function Playground() {
  const defaultProps = {
    options: top100Films,
    getOptionLabel: (option: FilmOptionType) => option.title,
  };
  const flatProps = {
    options: top100Films.map((option) => option.title),
  };
  const [value, setValue] = React.useState<FilmOptionType | null>(null);
  const [inputValue, setInputValue] = React.useState<string>('');

  return (
    <Stack spacing={1} sx={{ width: 300 }}>
      <Autocomplete
        {...defaultProps}
        id="disable-close-on-select"
        inputValue={inputValue}
        renderInput={(params) => (
          <TextField {...params} label="disableCloseOnSelect" variant="standard" />
        )}
        onChange={async (_, selectedItem) => {
          setInputValue(selectedItem?.title??"");
        }}
        onInputChange={(_, newInput) => {
          console.log("=============");
          console.log(newInput);
        }}
      />
      <Button onClick={() => setInputValue('')}>Clean</Button>
    </Stack>
  );
}

interface FilmOptionType {
  title: string;
  year: number;
}

// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
  { title: 'The Shawshank Redemption', year: 1994 },
  { title: 'The Godfather', year: 1972 },
  { title: 'The Godfather: Part II', year: 1974 },
  { title: 'The Dark Knight', year: 2008 },
  { title: '12 Angry Men', year: 1957 },
];