[Metrics UI] Inventory's custom group-by dialog acts weirdly

[sorantis]

Browser: Chrome
Kibana - latest

When opening a custom group by dropdown the the dialog is acting weirdly:

cc: @simianhacker

[elasticmachine]

Pinging @elastic/logs-metrics-ui (Team:logs-metrics-ui)

[simianhacker]

@sorantis What's the weird part? The fact that is changes size OR the little flash of the "drop" down right before it moves into the correct position?

[sorantis]

@simianhacker yes, the little flash.

[simianhacker]

@elastic/eui-design Thoughts?

[cchaos]

It's a known issue when the EuiComboBox is the first focusable element in a EuiContextMenu panel with ownFocus: elastic/eui#1454

[jasonrhodes]

Here's a possible workaround we should look into: elastic/eui#1454 (comment)

[simianhacker]

@jasonrhodes @cchaos That workaround won't work because when initialFocus is triggered the element we would try to focus on doesn't exist yet. This still appears to be broken in master. Has #56222 been merged into master?

[jasonrhodes]

It looks like #56222 is a different type of workaround:

Debugging this with @thompsongl, we figured this is due to EuiComboBox being rendered inside EuiPopover. The first element inside EuiPopover gets focus, which is in this case EuiComboBox, and the content of the combo box is rendered before popover has finished rendering. The workaround here is to pass an element for EuiPopover to put focus on, and if the element has no width and height, it will look seamless.

I'm not sure I 100% understand the solution but does this sound like something we could try in this case, @simianhacker ?

[smith]

Not sure if this is still valid. Please reopen if it's still an issue.