The Dropdown component renders the options outside the visible area

[lechip]

Environment

Operative System

EL Windows 10

Browser

Chrome 76.0.3809.100

Assistive technology used to verify

My eyes 😁

Detailed description

What version of the Carbon Design System are you using?

"2.0.0-alpha.85" is what I used on the actual project, but seems to happen on carbon-components v 10.1.0 && carbon-components-react v 7.0.0

What did you expect to happen?

When using Dropdown (and possibly ComboBox since it seems to behave similarly) inside the Modal the selectable items should be visible.

What happened instead?

The items are rendered outside view, making it unusable. It also creates an additional scrollbar.

Steps to reproduce the issue

1. Render a Dropdown with a few elements so the list is longer than the size of the Modal
2. Open the Modal with the Dropdown
3. Observe that the elements are not visible

Please create a reduced test case in CodeSandbox

https://codesandbox.io/embed/codesandbox-tt4rs

Additional information

[emyarod]

this is caused by the overflow rule in .bx--modal-container (https://github.com/carbon-design-system/carbon/pull/2289/files#diff-d662c14c5dcd7e4b41028bf60b9bc77bR77) and the overflow-y rule in .bx--modal-content (#190)

a workaround for your use case would be to set both values to visible

.bx--modal-container {
  overflow: visible;
}
.bx--modal-content {
  overflow-y: visible;
}

modified sandbox: https://codesandbox.io/s/codesandbox-fo7dj

[lechip]

This does the trick!
MY question is"Is it intended to behave with the overflows hidden?

[emyarod]

I believe the rules are intended for non-dropdown content within modals but if there is a better solution we can certainly look to modify the default component styles