[Autocomplete] The popup opens and closes immediately if another popup was open

[callbackKid]

order_id: 94701

Steps to reproduce

Repro: https://codesandbox.io/p/sandbox/reverent-tu-2g9w5y?file=%2Fsrc%2FDemo.tsx%3A7%2C21

1. Click "columns" or "filter" in the toolbar to open a popup
2. Click the placeholder text of the Autocomplete (i.e. click the input element to exactly to place keyboard focus in it)
3. Autocomplete's popup opens then closes immediately

It does not happen when doing this with the "density" or "export" buttons

Current behavior

When dropdown list of the "Filter" or "Columns" button is open, Automplete dropdown list closes immediately after being opened, this is a bug

Expected behavior

When dropdown list of the "Filter" or "Columns" button is open, Automplete dropdown list should stay opened and filter panel must be closed

Context

Hi! I tried to work around and to find the solution, and I found a problem that when I log a event.nativeEvent.relatedTarget in the console, the "filter" button is referenced, so this button triggers a close event, when "density" button is opened event.nativeEvent.relatedTarget is null, so there is a connection between "filter" button and automplete, I could not figure out how they are connected, maybe you can help and find a solution

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

System:
OS: macOS 14.5
Binaries:
Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
pnpm: Not Found
Browsers:
Chrome: 132.0.6834.112
Edge: Not Found
Safari: 17.5
npmPackages:
@emotion/react: 11.13.3 => 11.13.3
@emotion/styled: 11.13.0 => 11.13.0
@mui/base: 5.0.0-beta.61
@mui/core-downloads-tracker: 6.1.7
@mui/icons-material: 6.1.6 => 6.1.6
@mui/lab: 6.0.0-beta.14 => 6.0.0-beta.14
@mui/material: 6.1.6 => 6.1.6
@mui/private-theming: 6.1.7
@mui/styled-engine: 6.1.7
@mui/system: 6.1.7
@mui/types: 7.2.19
@mui/utils: 6.1.7
@mui/x-data-grid: 6.20.1
@mui/x-data-grid-premium: 6.20.1 => 6.20.1
@mui/x-data-grid-pro: 6.20.1
@mui/x-date-pickers: 7.22.2 => 7.22.2
@mui/x-internals: 7.21.0
@mui/x-license-pro: 6.10.2
@mui/x-tree-view: 7.22.1 => 7.22.1
@types/react: 18.2.37 => 18.2.37
react: 18.3.1 => 18.3.1
react-dom: 18.3.1 => 18.3.1
typescript: 5.7.2 => 5.7.2

Search keywords: filter button, autocomplete,

[mj12albert]

@callbackKid Thanks for reporting this, it's a bug ~

[DiegoAndai]

Hey @callbackKid, this is a duplicate of mui/mui-x#7044. I'm closing this one in favor of that one to keep the discussion focused, see: mui/mui-x#7044 (comment)

The workaround from mui/mui-x#7044 (comment) fixes your use case as well: https://codesandbox.io/p/sandbox/beautiful-northcutt-vgtjnq

This requires a @ts-ignore, which I also mentioned in the original issue.

Please upvote that original issue so the MUI X team can prioritize it and continue the discussion there.