Handling too many options inside EuiComboBox

[ek-so]

Currently, when we have too many options inside , the input area just gets bigger, and we do nothing with that by default. We have a couple of places in Kibana where that behaviour is overriden, and this issue comes up in Slack [internal link] from time to time.

The question is, if we want to solve this on EUI side consistently, and how exactly (possibly by having a scroll inside the input after it reached a certain height).

[JasonStoltz]

This Codesandbox sets up the scenario, we can try tweaking the CSS here to see what works.

I started with applying a max-height to the input wrapper.

[JasonStoltz]

[JasonStoltz]

FWIW, I had to mess with the border to make it look good. I would not recommend using this solution as-is, because changing the border will likely break when switching between light mode, dark mode, high contrast mode, etc.

Specifically, this line:

box-shadow: 0 0 0 1px #485975;

[JasonStoltz]

@elastic/eui-team

Check out This Codesandbox.

These style overrides appear to cleanly constrain the combobox height.

However, I had to apply an override to the border styles to make it looks correct, removing the inset property from box-shadow.

Before:

After:

This will almost certainly break when toggling to high contrast mode, etc.

I'm just wondering if ya'll know if there is a cleaner way to handle this.

Source: https://github.com/elastic/eui/blob/main/packages/eui/src/components/combo_box/combo_box_input/combo_box_input.styles.ts#L26

[weronikaolejniczak]

@ek-so @ryankeairns we have this ticket on our board: #8553

The proposed solution is to make the icons top-aligned. We might still want to restrict the height though, which could make the icons issue redundant.

Let me know if we want to have the icons top-aligned regardless of the EuiComboBox height? If so, I can work on it this week. If not, let's close this issue.

[ek-so]

Thanks Weronika! I'd say, those problems are separate to me.
Restricting height makes sense starting from relatively large height (say, 3, 4 lines of tags added, or more). In any case, when icons are aligned in the middle for the input that is more than 2 lines, it doesn't look the best already.