mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.48k stars 32.16k forks source link

[material-ui][Autocomplete] onChange never fired #41138

Closed nosachamos closed 7 months ago

nosachamos commented 7 months ago

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 commented 7 months ago

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] commented 7 months ago

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.