[Bug]: FilterableMultiSelect takes over browser focus when user interacts with TextInput

[mstudio]

Package

@carbon/react

Browser

Chrome, Safari, Firefox

Package version

1.65.0

React version

18.2.0

Description

If a user interacts with <FilterableMultiSelect> and then clicks to interact with a <TextInput>, the browser focus goes back to the <FilterableMultiSelect>.

Note that this behavior does not happen if a user clicks on another <FilterableMultiSelect>. The browser focus correctly moves to the new <FilterableMultiSelect>.

This could be an issue with either TextInput or FilterableMultiSelect.

Reproduction/example

https://stackblitz.com/edit/github-arvxo8-rsqqxb?file=package.json

Steps to reproduce

Click on the left-hand "FilterableMultiselect Sample" and interact with it. Next, click to enter text in the "TextInput Sample"

Note that the browser focus first switches to the <TextInput> but then immediately switches back to the <FilterableMultiselect>

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

CCX

Code of Conduct

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

[mstudio]

For anyone else experiencing this, I've found a temporary workaround. Add an event handler to regain control of the browser focus on your TextInput/TextArea:

<TextInput
    labelText="Sample"
    onFocus={e => {
        setTimeout(() => {
            // regain focus here after a short timeout, as a workaround
            e.target.focus();
        }, 60);
    }}
/>