fix(Tile): recalculate tile rect height on component did mount (#9593)

* fix(Tile): recalculate tile rect height on component did mount * Update packages/react/src/components/Tile/Tile.js Co-authored-by: Josh Black <[email protected]> * fix(Tile): remove unused variable * chore(Tile): update tests with mock ResizeObserver * chore(Tile): format file * fix(Tile-test): wrap resizeObserver in before/aftereach * fix(Tile-test): add asynchronous afterAll call * fix(jest): add ResizeObserver to setup Co-authored-by: Josh Black <[email protected]>
carbon-design-system · Sep 24, 2021 · d6884e0 · d6884e0
1 parent f6b6290
commit d6884e0
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 0 deletions.
diff --git a/config/jest-config-carbon/setup/setup.js b/config/jest-config-carbon/setup/setup.js
@@ -39,3 +39,13 @@ if (global.window) {
   const { getComputedStyle } = window;
   window.getComputedStyle = (element) => getComputedStyle(element);
 }
+
+if (global.window) {
+  window.ResizeObserver = jest.fn(() => {
+    return {
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+      disconnect: jest.fn(),
+    };
+  });
+}
diff --git a/packages/react/src/components/Tile/Tile.js b/packages/react/src/components/Tile/Tile.js
@@ -543,11 +543,22 @@ export class ExpandableTile extends Component {
         };
   }
 
+  resizeObserver = null;
+
   componentDidMount = () => {
+    this.resizeObserver = new ResizeObserver((entries) => {
+      const [aboveTheFold] = entries;
+      this.setState({
+        tileMaxHeight: aboveTheFold.contentRect.height,
+      });
+    });
+
     if (this.tile) {
       const getStyle = window.getComputedStyle(this.tile, null);
 
       if (this.aboveTheFold) {
+        this.resizeObserver.observe(this.aboveTheFold);
+
         this.setState({
           tileMaxHeight: this.aboveTheFold.getBoundingClientRect().height,
           tilePadding:
@@ -558,6 +569,12 @@ export class ExpandableTile extends Component {
     }
   };
 
+  componentWillUnmount() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+  }
+
   componentDidUpdate = (prevProps) => {
     if (prevProps.expanded !== this.props.expanded) {
       this.setMaxHeight();