diff --git a/package.json b/package.json
index f28d631..af28bc9 100644
--- 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
index 9b16cea..bf479d0 100644
--- 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 (
- (this.divRef = element)}
>
-
+
);
}
};
diff --git a/tests/components/__snapshots__/multi_select.spec.js.snap b/tests/components/__snapshots__/multi_select.spec.js.snap
index 470194c..cdba0e1 100644
--- 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`] = `
-
-
+
`;
exports[`MultiSelect Snapshots without responsiveHeight 1`] = `
-
-
+
`;
exports[`MultiSelect passes properties can remove search 1`] = `
diff --git a/tests/components/multi_select.spec.js b/tests/components/multi_select.spec.js
index 27038bf..5a5a0b4 100644
--- 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();
+ 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
index f81c1f7..10ec781 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8607,12 +8607,6 @@ promise@^7.1.1:
dependencies:
asap "~2.0.3"
-prop-types@15.5.8:
- 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"