Dropdown Menu Not Visible in Modal

Brief description

Similar issue to #1064 where dropdowns don’t work in modals.

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you’re having.

Dropdown menu is not visible when nested inside of a modal. It displays correctly outside of a modal.

Is this issue related to a specific component?

Modal

What did you expect to happen? What happened instead? What would you like to see changed?

I expected the dropdown menu to be visible inside of the modal

What browser are you working in?

Chrome 78.0.3904.70

What version of the Carbon Design System are you using?

• carbon-components 10.7.3
• carbon-components-react 7.7.3

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

IBM Cloud Monitoring. This is definitely a blocking issue as the designs I’m following require a dropdown inside a modal dialogue.

Steps to reproduce the issue

1. Check out https://codesandbox.io/s/codesandbox-cnn1z

Definition of Done

• Dropdown menu is visible and selectable
• It would nice if there was a unit test that had a dropdown in a modal and selected an option from it. But I guess programmatically it wouldn’t be hard to select.

[PatrickDuncan]

Thanks again @asudoh! I need to learn more about css floats haha

FYI to future readers: Add overflow:visible to: bx--modal-content to make the dropdown menu visible bx--modal-container to make the dropdown menu float above the modal, removing the border clipping https://codesandbox.io/s/codesandbox-bgdj5

[asudoh]

You can do the same for <div "bx--modal-container">, too.