Carbon: DropDown not working in 10.11.2

[virkt25]

DropDown not working in 10.11.2

What package(s) are you using?

• [ ] carbon-components - 10.11.2
• [ ] carbon-components-angular - 4.1.5

Detailed description

Describe in detail the issue you're having.

Updating carbon-components from 10.10.3 to 10.11.2 breaks the dropdown. Nothing renders in the dropdown list anymore. With both these version the version of carbon-components-angular was pinned to 4.1.5.

Is this issue related to a specific component?

DropDown

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

I expect my dropdown list to be populated as it was with 10.10.3.

What browser are you working in?

Chrome

What version of the Carbon Design System are you using?

Had to revert back and pin the project to 10.10.3

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

Steps to reproduce the issue

Only different with this code is change in carbon-components version which breaks this dropdown. It renders but clicking it presents an empty list.

<ibm-dropdown inline="true" [placeholder]="businessUnitDropdownLabel" (selected)="filterByBU($event)">
        <ibm-dropdown-list [items]="businessUnits"></ibm-dropdown-list>
</ibm-dropdown>

Additional information

• Screenshots or code
• Notes

[emyarod]

have you opened an issue over at https://github.com/IBM/carbon-components-angular?

[virkt25]

@emyarod It's not carbon-components-angular breaking the dropdown as stated in this issue

[joshblack]

Hey there @virkt25! 👋 Mind providing some steps to reproduce through a codesandbox so we can better track down what's going on?

[cal-smith]

Had some time to dig into this a bit today ... it seems like .bx--list-box__menu went from max-height: 8.75rem; to max-height: 0; ... Looking at react it seems like adding .bx--list-box--expanded would fix this. Totally open to adding that class, but in the future a little bit of heads up would be appreciated 🙂 Especially for breaking changes like this that are super easy to catch. @joshblack @virkt25

[asudoh]

@cal-smith My apologies it seems to have been #5810 - Due to the nature of list box the backward-compatibility to the existing markup totally slipped my mind.

Update: Found that v10.10 (older release) had bx--list-box--expanded class (already), I think that was the closest reason why I wasn't on alert wrt the breaking change. Allowing Angular/Vue teams some time for some integration tests as part of our (minor feature?) release process may be a future consideration.

[cal-smith]

Thanks for digging into this some more @asudoh! Totally understand how something like this could slip through the cracks in that situation ... Definitly highlights the need for some more aggressive integration tests though 😆

[virkt25]

Sorry team, I've been heads down on a project as we approach a deadline for this Friday. Thanks @cal-smith for helping to track down the issue. Hope it'll be fixed soon 😄

I can definitely do a code sandbox in the future (assume it's no longer needed for this issue). It just takes time and I wanted to report the issue so investigation can start.

[cal-smith]

This should work in the latest version of carbon-components-angular :+1: