[Dropdown: Combobox & Multiselect]: Update Figma kit focus states

[Kritvi-bhatia17]

Before starting this issue check with dev & Michael :

For fluid styles:

• Is it correct that the fluid dropdown does not get a focus state in the field when there is also a focus state on an item in the list? Looks like we have both focus states present in fluid multi-select and for the default dropdown and multi-selects. Not sure if that is an oversight or if there is a reason why it is different.

Regarding the focus state when expanding the dropdown:

• Confirm if it is intentional for the focus state to be initially on the pre-selected item and whether it is designed to become unfocused as soon as the mouse exits the dropdown.
• Explore the behavior when there is no default selection. Confirm whether any focus state is applied to options in this scenario.

All themes Figma library

• Default Dropdown
  • Single-select
  • Multi-select
• Fluid Dropdown
  • Single-select
  • Multi-select

---

• Next step is to talk to Michael and other designer to decide & finalise on the dropdown's design interaction.

Michael suggestions :

Single select dropdown (both the default and fluid state) :

• Parent component
  • No focus state when expanded
• Child component
  • Focus state on the selected option.
  • If none selected, the first child has the focus state.
• Persistence
  • Focus state remains as cursor moves out of the dropdown component.

Multi select dropdown (both the default and fluid state) :

• Parent component
  • Focus state will be there when expanded as their is an interactive state within the parent's component
• Child component
  • Focus state on the selected option.
  • If none selected, the first child has the focus state.
  • In case where multiple options are selected the focus state will be there for the first selected option
• Persistence
  • Focus state remains as cursor moves out of the dropdown component.

---

Next step:

• Update the parent's and child's focus state
• Update all the inconsistencies, bugs, miss
  • Remove the hover state from the Dropdown - Combo box - Default & Fluid
  • Add focus and hover state in the Dropdown - Multi-select - Default & Fluid

---

Review

• Review (accessibility expert/Michael)
• Review (carbon designer)

[Kritvi-bhatia17]

The solution

Ref : Figma branch link

Dropdown

• In this case, the parent child will not have the focus state when expanded.

Default

Fluid

---

Dropdown - Combobox

• Remove the hover state from the Dropdown - Combo box - Default & Fluid
• The focus stroke or border of the parent state will be 1 px, while the stroke of the child state will be 2 px.

Default

Fluid

---

Dropdown - Multi-select

• Add focus and hover state in the Dropdown - Multi-select - Default & Fluid
• The focus stroke or border of the parent state will be 1 px, while the stroke of the child state will be 2 px.
• The focus state for the child will be on the first selected option.

Default

Fluid

Filterable - Multi-select

---