[Bug]: FilterableMultiSelect not collapsing when selecting another FilterableMultiSelect

[riley-goodling]

Package

carbon-components-react

Browser

Firefox

Package version

v7.5.3

React version

v17.0.2

Description

When multiple MultiSelects are on a page and one is opened, it will collapse when you open a different MultiSelect. I expected this behavior to be the same with a FilterableMultiSelect, but it is not. With the FilterableMultiSelects, they will all continue to stay open until clicked away from all of them. I have included two videos, one that shows the MultiSelect collapsing when selecting another, and the other video showing the FilterableMultiSelects staying open even when selecting another.

https://user-images.githubusercontent.com/99508375/153663184-13a56a84-85ea-4815-b0cc-af5e6b8f6d35.mov

https://user-images.githubusercontent.com/99508375/153663188-09d6cd4a-647a-47e1-8c81-42d7550ab03a.mov

CodeSandbox example

https://codesandbox.io/s/romantic-leavitt-hqist?file=/src/App.jsx

Steps to reproduce

Create a page with multiple FilterableMultiSelects to see that they do not collapse when selecting another FilterableMultiSelect.

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate problems

[tay1orjones]

Here's another stripped down sandbox where you can see the difference https://codesandbox.io/s/stoic-panna-jfxfp

[hrshtpnt]

Is any fix added for this issue or a workaround? I see that the issue exists when the user clicks on the chevron up icon to open the dropdown.