[Autocomplete] Clearing the value by clicking the clear button opens the listbox

[asnoeyink]

Steps to reproduce

Link to live example: (required)

V6 (broken): https://stackblitz.com/edit/github-fr7tsj-ykudyp?file=src%2FApp.tsx

V5 (working): https://stackblitz.com/edit/github-y6gxof-bhyb6t?file=src%2FApp.tsx

Steps:

1. Select an option from the dropdown.
2. Blur the field.
3. Click on the clear button.

Current behavior

Expect the menu to be closed.

Expected behavior

Menu stays open (most of the time, sometimes it seems to close).

Context

If you do repeat the steps with mui v5, it closes as expected. Not entirely sure if this is intended behavior, but it broke some tests in my app when upgrading from v5 to v6. It seems to be a little nondeterministic though, which makes me think something is not right.

Your environment

npx @mui/envinfo

  System:
    OS: Linux 6.10 Fedora Linux 40.20241001.0 (Kinoite)
  Binaries:
    Node: 20.17.0 - ~/.nvm/versions/node/v20.17.0/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.17.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react: ^11.13.3 => 11.13.3
    @emotion/styled: ^11.13.0 => 11.13.0
    @mui/base: 5.0.0-beta.58 => 5.0.0-beta.58
    @mui/core-downloads-tracker:  6.1.2
    @mui/lab: 6.0.0-beta.10 => 6.0.0-beta.10
    @mui/material: ^6.1.2 => 6.1.2
    @mui/private-theming:  6.1.2
    @mui/styled-engine:  6.1.2
    @mui/system: ^6.1.2 => 6.1.2
    @mui/types:  7.2.17
    @mui/utils:  6.1.2
    @mui/x-date-pickers: ^7.18.0 => 7.18.0
    @mui/x-internals:  7.18.0
    @mui/x-tree-view: ^7.18.0 => 7.18.0
    @types/react: ^18.3.11 => 18.3.11
    react: 18.3.1 => 18.3.1
    react-dom: 18.3.1 => 18.3.1
    typescript: ^5.6.2 => 5.6.2

I use the latest firefox but this happens in chromium as well.

Search keywords: autocomplete,close,menu

[ddolcimascolo]

Related to #43976 ?

[mj12albert]

@asnoeyink Thanks for reporting this, I can reproduce this consistently
Did you mix up the current/expected behavior here though?

Current behavior
Expect the menu to be closed.

Expected behavior
Menu stays open (most of the time, sometimes it seems to close).

I think the expected behavior should be "clicking the clear button should never open/close the listbox" right? (and per the v5 sandbox, whether the input has focus or not shouldn't matter)

[asnoeyink]

Yeah I did get that backwards, oops. I think your expected behavior is more correct. The issue I'm seeing in V6 is that clicking the clear button on the unfocused input opens the listbox.

[mj12albert]

It doesn't repro for me on 6.1.5 anymore though, @asnoeyink try this sandbox: https://codesandbox.io/p/sandbox/https-github-com-mui-material-ui-issues-43978-54ndh2

[asnoeyink]

Yep, looks like it was fixed in #43982. Thanks!

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@asnoeyink How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.