[material-ui][Autocomplete] Listbox opens and closes on click when used with limitTags

[gguiceuna]

Steps to reproduce

Link to live example: (required)

https://stackblitz.com/edit/react-u4moum?file=Demo.tsx

Steps:

1. Select more than 2 options
2. Focus the text / search input (with Mouse Click)

Current behavior

The Listbox containing options will briefly flash, and close itself when all of the tags (chips) are revealed.

Expected behavior

The listbox containing options should remain open.

Context

This bug only occurs when clicking the input to focus. Using the keyboard (tab) does not replicate the bug. Also, you can occasionally see the listbox flash open and then close quickly when using the mouse to focus. Additionally, it seems if you click far enough to the right in the input the bug does not occur. I've found if I'm selecting options with shorter "titles" (using demo data) it makes the bug more difficult to replicate. It feels as though clicking the input in a location where when all of the chips are revealed and a chip will exist is what causes the bug.

In the attached screen shots if I click in the red box the bug will replicate. If I click where the blue box is (which is clearly to the right of where the Pulp Fiction chip will render) the bug does not replicate.

Your environment

Using Chrome (can replicate on StackBlitz using the Limit Tags demo page with openOnFocus set to true.

npx @mui/envinfo

   System:
    OS: macOS 14.5
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 125.0.6422.78
    Edge: Not Found
    Safari: 17.5
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1
    @emotion/styled: ^11.11.0 => 11.11.0
    @mui/core-downloads-tracker:  5.15.18
    @mui/icons-material: ^5.14.12 => 5.14.18
    @mui/lab: ^5.0.0-alpha.147 => 5.0.0-alpha.153
    @mui/material: ^5.15.18 => 5.15.18
    @mui/styled-engine:  5.14.18
    @mui/types:  7.2.14
    @mui/utils:  5.14.18
    @types/react: ^17.0.62 => 17.0.71
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    typescript: ^5.3.3 => 5.3.3

Search keywords: autocomplete, openOnFocus, limitTags

[ZeeshanTamboli]

I can reproduce it in the documentation: https://mui.com/material-ui/react-autocomplete/#limit-tags. The issue is with limitTags, not the openOnFocus prop. Marking it as a bug.

[ZeeshanTamboli]

It's a regression from #36369

[sahandghorbani]

still the bug exist ?

[ZeeshanTamboli]

still the bug exist ?

Yes. It's being fixed in #42494.

[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

We value your feedback @gguiceuna! How was your experience with our support team?
We'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!