[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!

[snapwich]

is it possible to get this fix in the 5.16.x release?

this bug actually affects Autocompletes in more cases than just with limitTags, it affects the Autocomplete component in general. you can see this if you go to the https://mui.com/material-ui/react-autocomplete/ page and click (mousedown) on the center of the autocomplete, drag your mouse slightly outside the Autocomplete's input so it's over the Autocomplete's root component and then release your click (mouseup). the mousedown will cause the menu to open and the mouseup will cause it to close.

this unfortunately broke some of our automated tests as it can cause the menu to open and immediately close in test runners if they click down on the input[role="combobox"] and then click up after some other elements (such as error fields) may be added/removed on focus/blur. it was also a quite hard to track down bug since it only affects Autocompletes that shift just the right amount to cause the mouseup to land on the root component.

i performed a bisect and tracked the bug to this PR: #36369 so it was introduced in 5.11.16 over a year ago. i also confirmed it is fixed with this change.

we are in the process of upgrading MUI but are not ready to upgrade all the way to MUI 6.x, so it would be appreciated if you're able to introduce this fix in older 5.x versions that were affected. thanks!

[ZeeshanTamboli]

I am not sure whether we will have v5 releases cc @DiegoAndai. We can cherry-pick this to v5 if we decide to release it.

[snapwich]

so unfortunately i have some bad news. i patched this fix into our version of MUI and ran it against our test suite and discovered that this fix actually introduces another bug. if you pull the latest MUI locally, start it, and go to the autocomplete page, scroll to the "Multiple values" section. if you add a few values (chips) to the first autocomplete and then click to remove them you'll notice it'll pop up the selection menu on every other click of the chip delete button. you'll see this behavior is not present on the current release at https://mui.com/material-ui/react-autocomplete/

i think since the click handler had a check removed if (event.target === event.currentTarget) { it might be handling clicks for all elements including buttons inside of it such as the chip delete buttons. i'd have to dig into it more to confirm but there's definitely a new bug here.

[snapwich]

i created a PR which seems to fix the new bug: #43982