Material-ui: [Autocomplete] onOpen callback invoked twice

[mindtraveller]

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

I'm using @material-ui/lab v4.0.0-alpha.36. It seems that onOpen callback of Autocomplete components is getting invoked twice when clicking into field.

Example of the component usage:

<Autocomplete
      value={props.value}
      options={props.options}
      loading={props.loading}
      multiple={props.multiple}
      renderInput={params => (
        <TextField
          {...params}
          fullWidth
          name={props.name}
          label={props.label}
          onBlur={props.onBlur}
          InputProps={{
            ...params.InputProps,
            endAdornment: (
              <>
                {props.loading ? <CircularProgress color="inherit" size={20} /> : null}
                {params.InputProps.endAdornment}
              </>
            ),
          }}
        />
      )}
      onOpen={() => console.log('on open')} <-- this is printed twice
      onChange={handleChange}
      getOptionLabel={option => option.label}
      getOptionSelected={(option, value) => option.value === value}
    />

Expected Behavior 🤔

onOpen callback should be invoked only once.

Steps to Reproduce 🕹

Steps:

1. Use Autocomplete component.
2. Provide onOpen callback.
3. Click into the field.
4. See that onOpen invoked twice.

Context 🔦

Your Environment 🌎

| Tech | Version |
| ----------- | ------- |
| Material-UI | v4.0.0-alpha.36 |
| React | v16.12.0 |
| Browser | Chrome |
| TypeScript | - |
| etc. | |

[oliviertassinari]

@Mindtraveller Why is this an issue?

[mindtraveller]

@Mindtraveller Why is this an issue?

Because Input was opened once whereas callback is invoked twice.
It's the same like invoking onChange or any other callback twice.

Do you think this is expected behaviour?

[oliviertassinari]

I have added the waiting for users upvotes tag. I'm closing the issue as we are not sure it's important. So please upvote this issue if you are. We will prioritize our effort based on the number of upvotes.

[UnknownHero]

Hi! I still have same problem.
So I want to share one of solutions. You can control "open" state.
Also you can call this in events of Autocomplete component: onClose, onClickCapture, onOpen (actually work without this event in my code)

```const [isOpen, changeIsOpen] = useState(false);
const openAutocomplete = (newOpenState: boolean) => {
if (isOpen === false && newOpenState !== isOpen) {
onOpen && onOpen();
}
if (isOpen === true && newOpenState !== isOpen) {
onClose && onClose();
}
changeIsOpen(newOpenState);
};

[oliviertassinari]

What's the issue? Why does it matter how many time the callback is fired?

[UnknownHero]

What's the issue? Why does it matter how many time the callback is fired?

I want to load data from server when i click Autocomplete component: https://material-ui.com/ru/components/autocomplete/#Asynchronous.tsx

Issue: double trigger of "onOpen" event. So, when i click Autocomplete element its trigger twice "fetch" to my server.

[UnknownHero]

To be sure:
Component render once, but onOpen triggered twice, so it's not re-render mistake

[oliviertassinari]

Does anyone has a reproduction? I can't reproduce.

[UnknownHero]

Does anyone has a reproduction? I can't reproduce.

I just want to share some more information.
If put alert('on open') into event handler, handler will invoke infinitely. Maybe its related with animation, I don't know.
Also my component wrapped by mobx.

Example:

<Autocomplete
      value={props.value}
      options={props.options}
      loading={props.loading}
      multiple={props.multiple}
      renderInput={params => (
        <TextField
          {...params}
          fullWidth
          name={props.name}
          label={props.label}
          onBlur={props.onBlur}
          InputProps={{
            ...params.InputProps,
            endAdornment: (
              <>
                {props.loading ? <CircularProgress color="inherit" size={20} /> : null}
                {params.InputProps.endAdornment}
              </>
            ),
          }}
        />
      )}
      onOpen={() => alert('on open')} <-- this is alert infinitely 
      onChange={handleChange}
      getOptionLabel={option => option.label}
      getOptionSelected={(option, value) => option.value === value}
    />

[oliviertassinari]

Please provide a minimal reproduction test case. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template _may_ be a good starting point. Thank you!