elastic / elastic/eui

[EuiComboBox] Migrate from class to function component

Open
#9,477 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 11h
Merged PRs (30d)
65

Description

`EuiComboBox` is a multi-select combo box with search, keyboard navigation, custom option creation, and virtualized options list. Very widely used across Kibana.

- **File:** `components/combo_box/combo_box.tsx`
- **Class size:** 466 lines
- **State:** `activeOptionIndex`, `hasFocus`, `isListOpen`, `matchingOptions`, `listOptionRefs`, `searchValue`
- **Lifecycle:** `getDerivedStateFromProps`

**Migration notes:**

Complex component with tightly coupled sub-components (`EuiComboBoxInput`, `EuiComboBoxOptionsList`). Should be migrated as a family. `getDerivedStateFromProps` syncs `options`/`selectedOptions` props to internal matching — needs careful refactoring. Focus management and keyboard navigation are intricate.

**Acceptance criteria:**

- [ ] Convert to function component with hooks
- [ ] Migrate together with `EuiComboBoxInput` and `EuiComboBoxOptionsList`
- [ ] Maintain keyboard navigation, search filtering, custom option creation
- [ ] All existing tests pass
- [ ] Manual verification of focus management and accessibility

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.