Eui: [EuiComboBox] Allow dropdown to expand to not truncate options

[cjcenizal]

This would solve the problem documented in https://github.com/elastic/kibana/issues/36409

[chandlerprall]

Took some time to look into this.

Complications

• react-virtualized requires the _width_ prop to be set, will not auto-expand to fit content
• EuiComboBox is designed to size up to but not exceeding 400px. This governed by CSS.
• The options' widths are set to fill the parent's space.
• Options auto-truncate via CSS

Solution requirements

• provide an exact width to react-virtualized
• compute options' widths apart from the DOM values (can't inspect an element's clientWidth, for example)
• update combobox CSS and JS to support both implementations

Proof of concept

I don't particularly like this approach, but wasn't able to come up with anything different. I also didn't try to reconcile the current max-width: 400px with the new setup, instead forcing all dropdowns to auto-fit their contents.

• Measure rendered width of labels when the dropdown expands
  
  
  
  • allows options to be dynamic
  
  
  • waits for CSS to be downloaded/applied, important for including the correct font style
  
  
• All browsers (only tested the PoC in Chrome) support CanvasRenderingContext2D.measureText()
• Canvas context needs to have the correct font style applied
  
  
  
  • the PoC cheats here by assuming the input box's font is the same size as the options list
  
  

Changes can be viewed at https://github.com/elastic/eui/compare/master...chandlerprall:feature/expanding-combobox-dropdown

[cchaos]

My thoughts:

A. I don't think it's ok to expand the dropdown's width indefinitely. There will be many issues that will arise from this including going completely off screen.

B. That being said we could give it a default max-width of 400px allowing the dropdown to grow to 400px even if the input is narrower.

C. However, that would mean we need to change some styles of the dropdown quite a bit and would want to consider centering the dropdown to the input.

Something like, but not enamored by:

[kertal]

since this is coming in frequently from different sources, solving this would be great. at least it the max width should be configureable, would also help. many thanks

[lizozom]

Any updates on this by any chance?

[chandlerprall]

@cchaos what about something like this?

[cchaos]

Yeah I've mostly dropped the ball on this because it's actually a harder problem to solve than it seems on the surface.

@lizozom We'll make sure a solution is done in this minor (7.11)

[cjcenizal]

@chandlerprall I think one issue with that solution could be that it requires "looking with your mouse", instead of your eyes. To get a sense for how that could be a frustrating UX, consider the screenshot in the description but with many fields that share the same stem, e.g. customer_first_name, customer_first_name_raw, customer_first_name_translated_fr, and so on. It'd be time-consuming to hunt through all of them with your mouse in order to find the one you want.

[cchaos]

We're currently looking into a solution that would allow the option labels to wrap, but hinders on the ability from the plugin we use for virtualization. Otherwise a couple solutions we'll also look into are:

1. Middle truncation
2. Customizing width of popover

Most of the solutions will be opt-in, meaning there will still need to be follow up by Kibana. Another piece of this will be that the field selector in Kibana should just be full width of the containing popover instead of 50% and/or extend the width of that popover.

[AlonaNadler]

I got another request from a customer about this issue, they are struggling with selecting the right index pattern in discover. Their index pattern have long names that get truncated. I can't share the screenshot since it contains sensitive information

[cchaos]

With https://github.com/elastic/kibana/pull/85320 merged, this is no longer urgent, but I'm still leaving open in hopes we can find a solution during a refactor to using EuiSelectable.