Issue with using ExpandableTile within a Tab

[molyholy]

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you're having.

The ExpandableTile component's default "unexpanded" state does not have the correct height when the page first renders. The below screenshot shows how they're way too short.

And the tile boxed in red shows what it's actually supposed to look like, with some elements AboveTheFold. You can "fix" this bug by expanding and collapsing the tile, but the user shouldn't have to do that to achieve the desired appearance.

---

After some poking around, it may have something to do with the Tabs and how the selected tab function works. By default, the first Tab ("Active") is selected, and the second "Upcoming" tab is not by default selected (and is where the ExpandableTiles are located).

This is how the page loads right now, with the "Active" Tab being the default selected Tab. You can see how the ExpandableTiles under the "Upcoming" Tab have the incorrect collapsed height, which can be fixed by expanding/collapsing it.

However, when the default selected Tab is "Upcoming," then the bug does not occur.

It might have something to do with this line that calls getBoundingClientRect() because when I tried calling that function from the Inspector it always returned zeros for every dimension.

Is this issue related to a specific component?
ExpandableTile and Tabs

What browser are you working in?
Firefox

What offering/product do you work on? Any pressing ship or release dates we
should be aware of?
This is for the Commitments and Subscriptions page for the billing microservice.

Steps to reproduce the issue

1. Go to https://test.cloud.ibm.com/billing/subscriptions
2. Login with username [email protected] and password ServiceLD01!
3. Click on the "Upcoming" Tab

Additional information

Link to another issue within IBM that documents this bug

[dakahn]

Thanks for reporting with a thorough issue ticket!