[EuiComboBox] Multiline options #8934

acstll · 2025-07-31T15:18:21Z

Summary

Resolves #7712

This PR adds the possibility to render EuiComboBox options in multiple lines instead of having text be truncated.

It's accomplished by disabling the virtualization of the list, by passing auto into the rowHeight prop.

The first version of the plan can be found in #7712 (comment)

Deltas with original plan (2)

~~update EuiComboBoxOptionsList to replace (the already deprecated) EuiFilterSelectItem with a simple, internal streamlined component~~

I found out that the only thing in EuiFilterSelectItem blocking the change was a single eui-textTruncate class, so I made it configurable

not truncate text and have text wrap (including word-space: break-word)

word-space: break-word is too aggressive and not suitable at all when not dealing with superlong strings of text without spaces; it would be nice to make this configurable with a prop, if there's the need

Why are we making this change?

To fulfill the request in #7712

Screenshots

Impact to users

None. All current usages of the component until now should remain unchanged. The number of changes have been kept to a minimum.

However, this change enables fixing a problem in Kibana that should have a very positive impact.

QA

Remove or strikethrough items that do not apply to your PR.

General checklist

Browser QA
- ~~Checked in both light and dark modes~~
- Checked in both MacOS and Windows high contrast modes
  - (emulate forced colors if you do not have access to a Windows machine.)
- Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox
- Checked for accessibility including keyboard-only and screenreader modes
Docs site QA
- Added documentation
- Props have proper autodocs (using @default if default values are missing) and playground toggles
- Checked Code Sandbox works for any docs examples
Code quality checklist
- Added or updated jest and cypress tests
- Updated visual regression tests
Release checklist
- A changelog entry exists and is marked appropriately.
- ~~If applicable, added the breaking change issue label (and filled out the breaking change checklist)~~
Designer checklist
- If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

this disables virtualization

…Height=auto

previous value was affecting accessibility, now it matches previous behavior

packages/eui/changelogs/upcoming/8934.md

packages/eui/src/components/combo_box/combo_box.stories.tsx

packages/eui/src/components/combo_box/combo_box_options_list/combo_box_options_list.styles.ts

packages/eui/src/components/combo_box/combo_box.stories.tsx

packages/eui/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx

packages/website/docs/components/forms/selection/combo-box.mdx

ListInnerElement cannot be used in JSX directly

packages/eui/src/components/combo_box/combo_box.stories.tsx

packages/eui/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx

packages/website/docs/components/forms/selection/combo-box.mdx

elasticmachine · 2025-08-03T06:53:51Z

💚 Build Succeeded

History

💚 Build #963 succeeded 046df63
💚 Build #960 succeeded 2a60c52
💚 Build #958 succeeded 59561a9

cc @acstll

elasticmachine · 2025-08-03T07:05:08Z

💚 Build Succeeded

Buildkite Build
Commit: 980b634

History

💚 Build #4516 succeeded 046df63
💚 Build #4513 succeeded 2a60c52
💚 Build #4511 succeeded 59561a9

cc @acstll

mgadewoll

🟢 Code changes LGTM and the enhanced rowHeight prop works as expected 🚀

- `@elastic/eui`: `v106.2.0` ⏩ `v106.3.0` - `@elastic/eui-theme-borealis`: `v3.3.0` ⏩ `v3.3.1` - `@elastic/eslint-plugin-eui`: `v2.2.1` ⏩ `v2.3.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Package updates ### `@elastic/eui` #### [`v106.3.0`](https://github.com/elastic/eui/releases/v106.3.0) - Added thumbUp and thumbDown icons ([#8937](elastic/eui#8937)) - Removed obsolete IE-specific CSS properties ([#8940](elastic/eui#8940)) - Updated `EuiComboBox` to allow multiline options by disabling virtualization (`rowHeight="auto"`) ([#8934](elastic/eui#8934)) **Bug fixes** - Fixed interactive content in header cells on `EuiDataGrid` not being correctly removed from the tab order ([#8938](elastic/eui#8938)) - Fixed an issue where the validity state of `EuiFieldNumber` did not update when the `isInvalid` prop value changed ([#8952](elastic/eui#8952)) - Reverted a font-size change for `xs` buttons back to `12px` ([#8930](elastic/eui#8930)) - Fixed unexpected results for the SCSS function `lineHeightFromBaseline` ([#8922](elastic/eui#8922)) - Fixed `euiDataGridRow--selected` not applying on `EuiDataGrid` whith `stripes={true}` ([#8925](elastic/eui#8925)) - Fixed `euiDataGridRow--marked` and `euiDataGridRow--selected` applying hover styling on `EuiDataGrid` when `stripes={true}` ([#8925](elastic/eui#8925)) **Accessibility** - Added a screen reader help text for entered interactive cells of `EuiDataGrid` to provide information about exiting cells ([#8938](elastic/eui#8938)) - Added a new beta `EuiLiveAnnouncer` component which supports `aria-live` announcements on mount ([#8916](elastic/eui#8916)) - Added `announceOnMount` prop on `EuiCallOut` to support announcing its content on mount ([#8916](elastic/eui#8916)) ### `@elastic/eui-theme-borealis` #### [`v3.3.1`](https://www.npmjs.com/package/@elastic/eui-theme-borealis/v/3.3.1) **Bug fixes** - Updated shared theme SCSS imports to ensure expected results for the SCSS function `lineHeightFromBaseline` ([#8922](elastic/eui#8922)) ### `@elastic/eslint-plugin-eui` #### [`v2.3.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.3.0) - Added `EuiFlyoutResizable` to `require-aria-label-for-modals` check ([#8946](elastic/eui#8946)) - Added new `no-unnamed-radio-group` rule. ([#8929](elastic/eui#8929)) - Fixed attributes comparison issue in the `consistent-is-invalid-props` rule. ([#8920](elastic/eui#8920))

- `@elastic/eui`: `v106.2.0` ⏩ `v106.3.0` - `@elastic/eui-theme-borealis`: `v3.3.0` ⏩ `v3.3.1` - `@elastic/eslint-plugin-eui`: `v2.2.1` ⏩ `v2.3.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Package updates ### `@elastic/eui` #### [`v106.3.0`](https://github.com/elastic/eui/releases/v106.3.0) - Added thumbUp and thumbDown icons ([elastic#8937](elastic/eui#8937)) - Removed obsolete IE-specific CSS properties ([elastic#8940](elastic/eui#8940)) - Updated `EuiComboBox` to allow multiline options by disabling virtualization (`rowHeight="auto"`) ([elastic#8934](elastic/eui#8934)) **Bug fixes** - Fixed interactive content in header cells on `EuiDataGrid` not being correctly removed from the tab order ([elastic#8938](elastic/eui#8938)) - Fixed an issue where the validity state of `EuiFieldNumber` did not update when the `isInvalid` prop value changed ([elastic#8952](elastic/eui#8952)) - Reverted a font-size change for `xs` buttons back to `12px` ([elastic#8930](elastic/eui#8930)) - Fixed unexpected results for the SCSS function `lineHeightFromBaseline` ([elastic#8922](elastic/eui#8922)) - Fixed `euiDataGridRow--selected` not applying on `EuiDataGrid` whith `stripes={true}` ([elastic#8925](elastic/eui#8925)) - Fixed `euiDataGridRow--marked` and `euiDataGridRow--selected` applying hover styling on `EuiDataGrid` when `stripes={true}` ([elastic#8925](elastic/eui#8925)) **Accessibility** - Added a screen reader help text for entered interactive cells of `EuiDataGrid` to provide information about exiting cells ([elastic#8938](elastic/eui#8938)) - Added a new beta `EuiLiveAnnouncer` component which supports `aria-live` announcements on mount ([elastic#8916](elastic/eui#8916)) - Added `announceOnMount` prop on `EuiCallOut` to support announcing its content on mount ([elastic#8916](elastic/eui#8916)) ### `@elastic/eui-theme-borealis` #### [`v3.3.1`](https://www.npmjs.com/package/@elastic/eui-theme-borealis/v/3.3.1) **Bug fixes** - Updated shared theme SCSS imports to ensure expected results for the SCSS function `lineHeightFromBaseline` ([elastic#8922](elastic/eui#8922)) ### `@elastic/eslint-plugin-eui` #### [`v2.3.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.3.0) - Added `EuiFlyoutResizable` to `require-aria-label-for-modals` check ([elastic#8946](elastic/eui#8946)) - Added new `no-unnamed-radio-group` rule. ([elastic#8929](elastic/eui#8929)) - Fixed attributes comparison issue in the `consistent-is-invalid-props` rule. ([elastic#8920](elastic/eui#8920))

acstll added 6 commits July 31, 2025 17:06

[EuiFilterSelectItem] Make text truncation optional via prop

df5e401

[EuiComboBox] Implement auto value for rowHeight prop

3ceb074

this disables virtualization

[EuiComboBoxOptionsList] Handle scroll into view for options when row…

6f81ebc

…Height=auto

[Snapshots] Update

75bfb20

[Docs] Add multiple lines section for EuiComboBox

b8c0245

[Storyboo][EuiComboBox] Add rowHeight=auto story

f324821

acstll self-assigned this Jul 31, 2025

acstll added the skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) label Jul 31, 2025

Changelog

59561a9

acstll removed the skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) label Jul 31, 2025

acstll added 4 commits July 31, 2025 18:10

[EuiComboBoxOptionsList] Add scrollbar styles to unvirtualized list

c947930

[Storybook] Skip loki for EuiComboBox story

5dee961

[EuiComboBoxOptionsList] Fix key

0b8429a

previous value was affecting accessibility, now it matches previous behavior

[EuiComboBox][a11y] Run tests also with rowHeight=auto

2a60c52

acstll marked this pull request as ready for review July 31, 2025 19:47

acstll requested a review from a team as a code owner July 31, 2025 19:47

mgadewoll self-requested a review August 1, 2025 07:20

mgadewoll reviewed Aug 1, 2025

View reviewed changes

acstll added 7 commits August 1, 2025 10:56

Fix changelog

8e1115f

Avoid limited availability CSS logical prop

95ffda9

[EuiComboBoxOptionsList] Share props for inner element

2bfc7d8

ListInnerElement cannot be used in JSX directly

[Feedback] Improved stories

a623f53

[VRT][EuiComboBox] Update

1dcca88

[Docs] New performance warning, adjust types

eea1c7a

Lint (argh)

046df63

acstll requested a review from mgadewoll August 1, 2025 09:54

mgadewoll reviewed Aug 1, 2025

View reviewed changes

Feedback

980b634

mgadewoll approved these changes Aug 4, 2025

View reviewed changes

mgadewoll enabled auto-merge (squash) August 4, 2025 07:42

mgadewoll merged commit 90d7e3c into elastic:main Aug 4, 2025
5 checks passed

weronikaolejniczak mentioned this pull request Aug 11, 2025

Upgrade EUI to v106.3.0 elastic/kibana#231288

Merged

JasonStoltz mentioned this pull request Sep 26, 2025

[EuiCombobox] allow for multiline options of different height #7712

Closed

acstll mentioned this pull request Sep 29, 2025

[EuiComboBox] Break long strings properly when rowHeight="auto" #9063

Merged

13 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[EuiComboBox] Multiline options #8934

[EuiComboBox] Multiline options #8934

Uh oh!

acstll commented Jul 31, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

elasticmachine commented Aug 3, 2025

Uh oh!

elasticmachine commented Aug 3, 2025 •

edited

Loading

Uh oh!

mgadewoll left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

[EuiComboBox] Multiline options #8934

[EuiComboBox] Multiline options #8934

Uh oh!

Conversation

acstll commented Jul 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Deltas with original plan (2)

Why are we making this change?

Screenshots

Impact to users

QA

General checklist

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

elasticmachine commented Aug 3, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Aug 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

💚 Build Succeeded

History

Uh oh!

mgadewoll left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

acstll commented Jul 31, 2025 •

edited

Loading

elasticmachine commented Aug 3, 2025 •

edited

Loading