elastic / elastic/eui

[EuiSelectable] Migrate from class to function component

Open
#9,480 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

`EuiSelectable` provides a searchable, accessible list with single or multi-select support. Used for site-wide search, option pickers, and the `EuiSelectableTemplateSitewide` pattern.

- **File:** `components/selectable/selectable.tsx`
- **Class size:** 408 lines
- **State:** Constructor-initialized (search value, options, active option index)
- **Lifecycle:** `getDerivedStateFromProps`, `componentDidUpdate`

**Migration notes:**

Complex component with `getDerivedStateFromProps` syncing options from props. Should be migrated together with `EuiSelectableList`. Search, selection, and keyboard navigation logic are intricate.

**Acceptance criteria:**

- [ ] Convert to function component with hooks
- [ ] Migrate together with `EuiSelectableList`
- [ ] Carefully handle `getDerivedStateFromProps` → state sync
- [ ] Maintain search, selection, keyboard navigation
- [ ] All existing tests pass

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.