Throws warning: List doesn't get rendered when items are loaded async…

… and select component is hidden (#145) * Throws warning: List doesn't get rendered when items are loaded async and select component is hidden * fix test logic
kenshoo · May 12, 2019 · 1148417 · 1148417
1 parent 00043df
commit 1148417
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 31 deletions.
diff --git a/package.json b/package.json
@@ -94,7 +94,6 @@
     "classnames": "2.2.5",
     "jss": "^9.8.7",
     "prop-types": "^15.6.2",
-    "react-height": "^3.0.0",
     "react-icons": "^2.2.7",
     "react-jss": "^8.6.1",
     "react-overflow-tooltip": "^2.0.1",

diff --git a/src/components/with_responsive_height.js b/src/components/with_responsive_height.js
@@ -1,6 +1,5 @@
 import React, { PureComponent } from "react";
 import PropTypes from "prop-types";
-import ReactHeight from "react-height";
 
 const DEFAULT_HEIGHT = 400;
 
@@ -23,20 +22,37 @@ const withResponsiveHeight = WrappedComponent =>
       height: DEFAULT_HEIGHT
     };
 
-    changeHeight = height => {
+    getClientHeight() {
+      return this.divRef.clientHeight;
+    }
+
+    componentDidMount() {
+      const clientHeight = this.getClientHeight();
+      this.changeHeight(clientHeight);
+    }
+
+    componentDidUpdate() {
+      const { height } = this.state;
+      const clientHeight = this.getClientHeight();
+      if (clientHeight && height !== clientHeight) {
+        this.changeHeight(clientHeight);
+      }
+    }
+
+    changeHeight(height) {
       this.setState({ height: height - 2 });
-    };
+    }
 
     render() {
       const { responsiveHeight, ...props } = this.props;
       const { height } = this.state;
       return (
-        <ReactHeight
+        <div
           style={{ height: responsiveHeight }}
-          onHeightReady={this.changeHeight}
+          ref={element => (this.divRef = element)}
         >
           <WrappedComponent {...props} height={height} />
-        </ReactHeight>
+        </div>
       );
     }
   };

diff --git a/tests/components/__snapshots__/multi_select.spec.js.snap b/tests/components/__snapshots__/multi_select.spec.js.snap
@@ -4346,11 +4346,7 @@ exports[`MultiSelect Snapshots with generateClassName 1`] = `
 `;
 
 exports[`MultiSelect Snapshots with responsiveHeight 1`] = `
-<ReactHeight
-  dirty={true}
-  getElementHeight={[Function]}
-  hidden={false}
-  onHeightReady={[Function]}
+<div
   style={
     Object {
       "height": "70%",
@@ -4363,15 +4359,11 @@ exports[`MultiSelect Snapshots with responsiveHeight 1`] = `
     items={Array []}
     selectedItems={Array []}
   />
-</ReactHeight>
+</div>
 `;
 
 exports[`MultiSelect Snapshots without responsiveHeight 1`] = `
-<ReactHeight
-  dirty={true}
-  getElementHeight={[Function]}
-  hidden={false}
-  onHeightReady={[Function]}
+<div
   style={
     Object {
       "height": "400px",
@@ -4384,7 +4376,7 @@ exports[`MultiSelect Snapshots without responsiveHeight 1`] = `
     items={Array []}
     selectedItems={Array []}
   />
-</ReactHeight>
+</div>
 `;
 
 exports[`MultiSelect passes properties can remove search 1`] = `

diff --git a/tests/components/multi_select.spec.js b/tests/components/multi_select.spec.js
@@ -248,6 +248,17 @@ describe("MultiSelect", () => {
       );
       expect(tree).toMatchSnapshot();
     });
+
+    test("changeHeight will not be called", () => {
+      const changeHeight = jest.fn();
+      const getClientHeight = jest.fn(() => 44);
+      const tree = mount(<MultiSelectWithState />);
+      const instance = tree.instance();
+      instance.getClientHeight = getClientHeight;
+      instance.changeHeight = changeHeight;
+      instance.componentDidUpdate();
+      expect(changeHeight).toHaveBeenCalled();
+    });
   });
 
   describe("passes properties", () => {

diff --git a/yarn.lock b/yarn.lock
@@ -8607,12 +8607,6 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-[email protected]:
-  version "15.5.8"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.8.tgz#6b7b2e141083be38c8595aa51fc55775c7199394"
-  dependencies:
-    fbjs "^0.8.9"
-
 prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.5.9, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
   version "15.6.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
@@ -8934,12 +8928,6 @@ react-fuzzy@^0.5.2:
     fuse.js "^3.0.1"
     prop-types "^15.5.9"
 
-react-height@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/react-height/-/react-height-3.0.0.tgz#fae322f9da64d3e9e25536f26b77c73954261524"
-  dependencies:
-    prop-types "15.5.8"
-
 react-html-attributes@^1.4.2:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/react-html-attributes/-/react-html-attributes-1.4.3.tgz#8c36c35fce6b750938d286af428ed1da7625186e"