[material-ui][Autocomplete] onChange never fired

[nosachamos]

Steps to reproduce

In order to repro, you can use an example that comes from the autcomplete doc:

https://mui.com/material-ui/react-autocomplete/#controlled-states

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

const options = ['Option 1', 'Option 2'];

export default function ControllableStates() {
  const [value, setValue] = React.useState<string | null>(options[0]);
  const [inputValue, setInputValue] = React.useState('');

  return (
    <div>
      <div>{`value: ${value !== null ? `'${value}'` : 'null'}`}</div>
      <div>{`inputValue: '${inputValue}'`}</div>
      <br />
      <Autocomplete
        value={value}
        onChange={(event: any, newValue: string | null) => {
          setValue(newValue);
        }}
        inputValue={inputValue}
        onInputChange={(event, newInputValue) => {
          setInputValue(newInputValue);
        }}
        id="controllable-states-demo"
        options={options}
        sx={{ width: 300 }}
        renderInput={(params) => <TextField {...params} label="Controllable" />}
      />
    </div>
  );
}

Current behavior

You'll see that if you place focus on the input, and then select an option from the dropdown, the value does not update. The onChange event handler is never fired.

It works on the doc, probably because it uses an older version of MUI. I tested on 5.15.10 (the latest).

Expected behavior

The onChange handler should fire and the selected option should be set on the text field.

Context

No response

Your environment

npx @mui/envinfo

Tested on Brave.


  System:
    OS: Linux 5.15 Ubuntu 20.04.5 LTS (Focal Fossa)
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
    pnpm: 7.1.6 - /usr/bin/pnpm
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.36 
    @mui/core-downloads-tracker:  5.15.10 
    @mui/material: ^5.15.10 => 5.15.10 
    @mui/private-theming:  5.15.9 
    @mui/styled-engine:  5.15.9 
    @mui/system:  5.15.9 
    @mui/types:  7.2.13 
    @mui/utils:  5.15.9 
    @mui/x-date-pickers: ^6.19.0 => 6.19.0 
    @types/react: ^18.0.9 => 18.2.41 
    react: ^18.0.9 => 18.2.0 
    react-dom: ^18.0.9 => 18.2.0 
    typescript: ^4.6.3 => 4.9.5 

Search keywords: autocomplete onchange not fired

[DiegoAndai]

Hey @nosachamos , thanks for the report!

I'm not able to reproduce this in version 5.15.10: https://stackblitz.com/edit/stackblitz-starters-nhtrdm?file=src%2FApp.tsx

https://github.com/mui/material-ui/assets/16889233/2c5f58fe-4a58-4d33-942b-d01c06cb16f0

Could you provide a reproduction? A live example would be perfect. This StackBlitz sandbox template may be a good starting point. Thank you!

[github-actions[bot]]

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.