Eui: [EuiComboBox] Not showing options inside a Flyout

[sebastienlabine]

Hi,

The options are not showing when using combobox inside a EuiFlyout. The behaviour should be the same as when being used in a modal.

I reproduced the error by using the EuiComboBox Containers demo.
Bug demo

[miukimiu]

Hi @sebastienlabine,

Thanks for reporting this bug. It seems that we have a z-index problem. The EuiComboBox z-index is programmatically added to the options list but for some reason, it's not calculating the right z-index when it's inside a EuiFlyout.

One temporary solution is to change the EuiFlyout z-index to 6000 or higher. With this, the EuiComboBox calculates the right z-index.

Here's the temporary solution: https://codesandbox.io/s/eui-combox-bug-forked-38e3q?file=/index.js

[sebastienlabine]

hey @miukimiu,

I just encountered an other problem, where when you click on the combobox and scroll outside the combox box in a flyout, the options are not properly anchored to the combobox.

https://codesandbox.io/s/eui-combox-bug-2-mydpd

[cchaos]

@sebastienlabine I've located the root of the problem. The modified demo code was replacing the EuiModal with EuiFlyout but was keeping the manual EuiOverlayMask as a wrapper. EuiFlyout's have their own way of using EuiOverlayMask which is by using the ownFocus prop. I've modified the codesandbox above that shows the combo box working with ownFocus: https://codesandbox.io/s/eui-combox-bug-forked-okyfe?file=/index.js

The second bug you mentioned is one we've been aware #3456 of and are hoping to tackle in the near future.

Luckily our docs are still correct since the usage is of a modal wrapped in an EuiOverlayMask works. We could probably stand to add an example of one in a flyout as well, mainly for testing purposes. But I'm going to close this one out as an implementation error.