Filterable Multiselect focus outline on wrong node

When a filterable multiselect has some options selected, clicking on it’s <input> puts focus outline on wrong node:

Environment

Operating system

MacOS

Browser

Chrome

Detailed description

What version of the Carbon Design System are you using?

10.26

What did you expect to happen?

Focus outline around whole control.

What happened instead?

Focus outline around <input>

Test case

See https://react.carbondesignsystem.com/?path=/story/multiselect--filterable or https://react.carbondesignsystem.com/?path=/story/multiselect--filterable

Note that clicking more to the left will put the focus outline around the whole control:

Presumably a regression from #4721.

[wkeese]

I agree you can debate which focus outline is better from an accessibility standpoint, but I think you need to pick one way or the other. Right now tabbing into or clicking on the <input> puts the focus outline on the <input>:

But clicking on the upper left (when options are selected) puts the focus outline on the whole control:

The other (very related) issue is that there’s actually an extra tab stop on the whole control: clicking on the upper left and then pressing the tab key goes to the (2 x) button, and then another tab goes to the <input>… i.e. there are 3 tab stops where there should be 2.

(Both these screenshots are from React on Chrome/mac but I assume it’s a universal behavior.)

PPS: I would also question the slightly different background colors for the left side vs. the input.

[wkeese]

Looks like you fixed this. Judging from https://react.carbondesignsystem.com/?path=/story/components-multiselect--filterable the focus outline is always around the whole control (except when the (2x) button is focused, in which case the focus outline is just on that button).