Searchable Dropdown

Multi-Select Dropdown Component

Build a reusable React multi-select dropdown with search, keyboard navigation, and tag-based selection — similar to how modern apps like Notion, Linear, and GitHub handle multi-select fields.

Functional Requirements

Search Input

• There should be an input field where the user can type to filter options.
• The input must show a placeholder: "Search fruits...".
• Typing inside the input filters the available options dynamically.

Dropdown Options

• All available options should be displayed in a dropdown list.
• As the user types, the list must be filtered.
• Already selected options should not appear in the dropdown again.
• Options should be clickable with a mouse OR selectable with the keyboard (Enter).
• The currently highlighted option (keyboard navigation) must have a visual highlight.

Selected Tags

• Selected options should appear above the input as removable tags.
• Each tag should have a close button (✕) to remove it.
• When removed, the option should return to the available dropdown.

Keyboard Navigation

• ArrowUp / ArrowDown → Move between filtered options.
• Enter → Select the currently highlighted option.
• Backspace → If the input is empty, remove the last selected tag.

Accessibility & UI

• Dropdown should provide clear visual feedback when options are highlighted.
• UI should be clean, modern, and responsive.
• The dropdown must scroll when there are many options, keeping the highlighted option in view.

Sample Options

[
  "Apple",
  "Banana",
  "Cherry",
  "Date",
  "Grape",
  "Lemon",
  "Mango",
  "Orange",
  "Papaya",
  "Pineapple",
  "Strawberry",
  "Watermelon"
]

Data-TestId Reference

Use the following data-testid attributes for testing. For dynamic ones, replace the option name with the actual option string in lowercase (no spaces).

Fixed test IDs

• Search input field -> data-testid =search-input
• Currently highlighted option -> data-testid = highlighted-option

Dynamic test IDs

Dropdown option

• Format → dropdown-option-<option>

data-testid="dropdown-option-apple"
data-testid="dropdown-option-mango"
data-testid="dropdown-option-watermelon"

Selected tag

• Format → selected-tag-<option>

data-testid="selected-tag-banana"
data-testid="selected-tag-pineapple"

Remove tag button

• Format → remove-tag-<option>

data-testid="remove-tag-banana"
data-testid="remove-tag-pineapple"