[A11Y] MultiSelect Filterable does not close the dropdown menu when tabbing to a different input field

[fbarroso24]

This happens for any type of Filterable dropdown (e.g. [Multiselect Filterable](https://react.carbondesignsystem.com/?path=/docs/components-multiselect--filterable Multiselect filterable w/layers

When a user types in the MultiSelect Filterable component, it immediately opens up the dropdown and starts to show options that contain the text you've entered. However, if the user tabs through to a different area of the UI, that dropdown menu remains visible even though the focus correctly moves to the next input element (see screenshot below). This has the negative impact in that the visible dropdown could unintentionally cover other content on the page.

Example) In the screenshot below, I've typed in 2 and the dropdown appears filtering out any options that do not contain 2. However, once I tab to the First Layer input, the Multiselect title dropdown remains open and still shows Option 2 . This is different behavior than what happens with the click. If I type something in Multiselect title dropdown and then click elsewhere in the UI, the dropdown closes. I would expect that tabbing to a different UI input would also close the multiselect filterable dropdown.

Carbon Versions "carbon-components": "10.57.2", "carbon-components-react": "7.57.2", NOTE: This is also reproducible on latest carbon storybook as well (e.g. 11.x)

[dakahn]

unable to repro on either latest Chrome or Firefox on macOS using this example https://stackblitz.com/edit/github-ezkkzk?file=src/App.jsx

seem like it could be a Storybook issue :hurtrealbad:

[tay1orjones]

Thanks @dakahn! Your stackblitz is using MultiSelect, which doesn't seem to be impacted. ComboBox is behaving as expected as well.

I am able to reproduce the issue though by modifying the stackblitz slightly to use FilterableMultiSelect.

https://stackblitz.com/edit/github-ezkkzk-uunzvj?file=src%2FApp.jsx

[tay1orjones]

Worth noting that the ability to close the dropdown is not impacted. The dropdown can still be closed by pressing escape when focused on the input.

[fbarroso24]

Thanks @tay1orjones for providing your example. https://stackblitz.com/edit/github-ezkkzk-uunzvj?file=src%2FApp.jsx

@dakahn this only seems to be an issue when the multiselect is filterable. In the above example, you'll be able to repro it via the following steps

1. Type 2 in 1st multi-select
2. Press TAB key twice Expected: 1st multi-select dropdown is closed & focus is on 2nd input field Actual: 1st multi-select dropdown is NOT closed & focus is on 2nd input field. Notice, when this happens the dropdown is blocking the label for the 2nd input field which currently has focus (screenshot 1). I'd expect the filterable mutliselect to close as soon as it loses focus similar to the behavior when you click outside of the field via a mouse.