ComboBox and DropdownV2 cut off by bx--modal-content

Detailed description

When a ComboBox or DropdownV2 component is placed inside of a modal, the bx–modal-content container will clip any dropdown items that extend past its bottom edge when the elements are expanded. You can still scroll down to see them, but on the initial click to expand the element, some or all of the items will appear to be missing. (Tested on Chrome)

Steps to reproduce the issue

1. Nest a Dropdown or ComboBox component inside of a Modal. Expand the nested component. Unless the expanded component happens to be shorter than the height of bx--modal-content, some or all of its dropdown items will be clipped. See sample code here: https://codesandbox.io/s/2p2w3zpmyr

This dropdown has three elements, but unless you scroll down after opening it, only the first two are visible.

This ComboBox also has three items. It appears empty because it is positioned as the very last element inside of bx–modal-content. The items are still there, but there’s no visual indication that you need to scroll, and none of the items become visible after you click on the combo box.

[bjones526]

@alisonjoseph Are you talking about locking the scrollbar on bx--modal-content so that the scrollbar is always present and gets visibly shorter when the dropdown is open? I see how that could be an improvement since it at least indicates that more content exists, but I’m not really happy with that as a workaround for two reasons. a) you can still get into a scenario where users click on a dropdown and can’t see any items, so it seems broken, and b) it can be a little painful to force visible scrollbars on mac given apple’s preference for making them disappear.

If there’s no way to fix this with css, my preference would be to let the modal listen for changes to its child dropdown components and use javascript to autoscroll its content when needed. The old dropdown component has a set of onOpen and onClose functions that would work, but I don’t think DropdownV2 or ComboBox expose anything like that. Is that something that could be added?

[dakahn]

Closing this one out as resolved. Let me know if that’s not the case and I can reopen yall 🤠