Eui: EuiSuperSelect in flyout does not scroll correctly

[jgowdyelastic]

When using an EuiSuperSelect within a flyout, no scrollbar appears for long lists. Making it impossible to see or select every value.

In the example below, the Timestamp format select options overflow over the top of the page making it impossible to select them.
Also if you scroll within the page with a smaller select open, the options panel panel moves around the page.

[cchaos]

@jgowdyelastic We are still working out a lot of kinks with the EuiSuperSelect like scrolling and position. Thanks for making this issue for it.

Looking at your example, though, is there a reason you need the EuiSuperSelect instead of a single select EuiComboBox or just a normal EuiSelect? Usually the super select is needed if each selection item needs to render more than just the value and/or if the selected display of the value is slightly different from the dropdown display.

I thin you'll find the behavior and accessibility of either the EuiComboBox or EuiSelect to be much better.

[jgowdyelastic]

@cchaos Thanks for the response. I was actually in the process of switching them over to EuiComboBox when I raised this issue. (https://github.com/elastic/kibana/pull/31128)
I thought it best to raise this to make a note of the reason why I was switching them over.

[cchaos]

Amongst other reasons, this is a good example of the EuiSuperSelect needing to use the same popover service as the EuiComboBox. In fact, it would be a great opportunity to to try to break out some of the comboboxe's internals for re-use.

[cchaos]

The height of EuiSuperSelect's popover has been fixed by setting a max-height and scrolling so that's no longer an issue here.

The popover also does stick to the input if the input is in the normal DOM and the window scrolls. However it does not stick to the input if the input is in a fixed-position element or an element that scrolls independently of the window scroll.

[cchaos]

Closing as the last item is a dup of #1023