(ExpandableTile): maxHeight calculation is wrong when component is mounted off viewport

[jaknas]

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you're having.

Issue: If <ExpandableTile/> is placed offscreen, and mounted for example in a <Tab/>, then the calculation for its maxHeight is wrong.

carbon/packages/react/src/components/Tile/Tile.js

Line 485 in 51ee1f5

tileMaxHeight: this.aboveTheFold.getBoundingClientRect().height,

It uses getBoundingClientRect() which returns 0 for all values, so the maxHeight is only calculated from padding:

carbon/packages/react/src/components/Tile/Tile.js

Line 571 in 51ee1f5

: this.state.tileMaxHeight + this.state.tilePadding,

Is this issue related to a specific component?

Yes, ExpandableTile

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

I expected to have same height for both tiles, regardless whether they're inside a hidden component or visible normally.

Maybe the prop tileMaxHeight can be used to override this calculation?

What browser are you working in?

Chrome

What version of the Carbon Design System are you using?

newest

Steps to reproduce the issue

1. Open codesandbox
2. Switch between tabs, see that unfolded height is different for the same component

Please create a reduced test case in CodeSandbox

https://codesandbox.io/s/keen-bush-ztref?file=/src/index.js

Additional information

• Screenshots or code

properly calculated height (when visible on mount)

when switching to second tab, wrong height for the same component. it should be the same as on the first tab

[emyarod]

yeah it looks like because these tiles are placed within tabs, they are mounted to the DOM and never rerendered since the visibility is toggled by the hidden attribute on the tab. I don't think we would add a one-off prop to specify the height of a tile, but a possible solution may be to create a higher order component that renders the tile when its parent is visible, using the Intersection Observer API (something like this https://github.com/AvraamMavridis/react-intersection-visible maybe). I don't think there's a reasonable way for us to support this use case out of the box though

[jaknas]

yeah it looks like because these tiles are placed within tabs, they are mounted to the DOM and never rerendered since the visibility is toggled by the hidden attribute on the tab. I don't think we would add a one-off prop to specify the height of a tile, but a possible solution may be to create a higher order component that renders the tile when its parent is visible, using the Intersection Observer API (something like this https://github.com/AvraamMavridis/react-intersection-visible maybe). I don't think there's a reasonable way for us to support this use case out of the box though

Thank you for checking this out! Indeed, this can be done in user-land. I opened a new code-sandbox with react-intersection-observer: https://codesandbox.io/s/condescending-pine-zmbbu?file=/src/index.js and it works great.