Single-select and multi-select Z order

[co-stig]

Description:

Single and multi-select components can be overlapped by other components.

Steps to Reproduce:

1. Open Multiselect component in Storybook
2. Drag the bottom part of the page with the tabs all way up to the component
3. Expand the dropdown -- the items are cut vertically:

Expected Result:

The best result would be to always display the dropdown list with the highest Z index, so that it overlaps anything else on the page.

Alternatively, if we can't do this and we are limited by height, we need to display a vertical scrollbar within the component itself, similarly how it is done with react-select.

Actual Result:

The list gets cut.

Frequency (1/1, 1/50, 1/100):

100%

Build/Commit:

v20.34.5

[verena-ifx]

Please provide an example here other than storybook (the behavior here differs from when it is used in a real web application)

[polyen]

Here is an example of this issue.

I have three options in a select. To see all of them I have to scroll dialog content. It looks like this:

I agree with @co-stig the expected result