fix(Multiselect): remove focus when MultiSelect is open

[tw15egan]

Closes #16252
Closes #16257

Removes focus from MultiSelect when the dropdown menu is opened. The focus should return to the input when it is closed.

This also adds a distinct FilterableMultiselect story under FluidMultiSelect for consistency with the non-fluid Multiselect story

Changelog

New

• Filterable story under Fluid components --> FluidMultiselect

Changed

• Only adds focus to the Multiselect button when the input is closed

Testing / Reviewing

Open the Multiselect; there should be no focus border around the input, only the item. Ensure the Filterable variant of FluidMultiselect is discoverable

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	04c771d
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/6630a2af6f36a40008821bc4
😎 Deploy Preview	https://deploy-preview-16259--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Kritvi-bhatia17]

DAMN, @tw15egan, that was quick! 🔥

1. Sorry, I might not have been clear about the focus state explanation (both for default and fluid multi-select).

2. What was the initial thought behind "With Initial Selected Item" showing this upfront?

3. Should we also introduce Filterable With Layer under fluid multi-select as well?

[tw15egan]

@Kritvi-bhatia17 We keep the focus on FilterableMultiselect and Combobox when an item is selected because a user can still type in the input. What affordance does the added input focus give a user when an item is selected vs not? It gains "focus" but doesn't gain any new functionality

#2 is just an example of using the initialSelectedItems prop / ensures it is working properly

#3 Sure I can add that 👍🏻

[Kritvi-bhatia17]

@Kritvi-bhatia17 We keep the focus on FilterableMultiselect and Combobox when an item is selected because a user can still type in the input. What affordance does the added input focus give a user when an item is selected vs not? It gains "focus" but doesn't gain any new functionality

#2 is just an example of using the initialSelectedItems prop / ensures it is working properly

#3 Sure I can add that 👍🏻

#1 In the selected multi-select, as a user can clicks on the 2 X tag (actionable), that's why a focus state is applied to the parent element.

[tw15egan]

@Kritvi-bhatia17 Focus states are usually added as an affordance for keyboard users, not mouse users, but I can add this if you would like. We don't have any of these "double" focus states outside the ListBox components, so we are setting precedence here that may need to be expanded to other components in the repo. When the menu is closed, a keyboard user will clear the selection by pressing the escape key when the focus is on the input. Focus used to go to the x icon directly, but that was removed in #13173

[tw15egan]

@Kritvi-bhatia17 updated 👍

[Kritvi-bhatia17]

@Kritvi-bhatia17 Focus states are usually added as an affordance for keyboard users, not mouse users, but I can add this if you would like. We don't have any of these "double" focus states outside the ListBox components, so we are setting precedence here that may need to be expanded to other components in the repo. When the menu is closed, a keyboard user will clear the selection by pressing the escape key when the focus is on the input. Focus used to go to the x icon directly, but that was removed in #13173

Hi @tw15egan! Thanks for sharing this with me. I'm not entirely sure about this, so I'll reach out to Lauren to get a little more context.

[Kritvi-bhatia17]

LGTM!
Great work @tw15egan!! 🔥

[Kritvi-bhatia17]

@Kritvi-bhatia17 Focus states are usually added as an affordance for keyboard users, not mouse users, but I can add this if you would like. We don't have any of these "double" focus states outside the ListBox components, so we are setting precedence here that may need to be expanded to other components in the repo. When the menu is closed, a keyboard user will clear the selection by pressing the escape key when the focus is on the input. Focus used to go to the x icon directly, but that was removed in #13173

Hi @tw15egan, I connected with Lauren to confirm about this and she said that:
While the point you're making is valid, but we we are adding this because of a11y reasons. We show focus on the first item in the menu for Menu, and same with Combo button and Overflow menu, and those were a11y decisions. So it seems like we are kind of doing this across multiple components in our system already.