fix: schedule an update when placements change (#207)

Author: FezVrasta

.size-snapshot.json

@@ -1,25 +1,25 @@
 {
   "dist/index.umd.js": {
-    "bundled": 49663,
-    "minified": 17800,
-    "gzipped": 5697
+    "bundled": 49222,
+    "minified": 17476,
+    "gzipped": 5540
   },
   "dist/index.umd.min.js": {
-    "bundled": 25322,
-    "minified": 10167,
-    "gzipped": 3405
+    "bundled": 23917,
+    "minified": 9697,
+    "gzipped": 3231
   },
   "dist/index.esm.js": {
-    "bundled": 9679,
-    "minified": 5577,
-    "gzipped": 1739,
+    "bundled": 9538,
+    "minified": 5425,
+    "gzipped": 1716,
     "treeshaked": {
       "rollup": {
-        "code": 4623,
+        "code": 4469,
         "import_statements": 137
       },
       "webpack": {
-        "code": 5357
+        "code": 5590
       }
     }
   }

package.json

@@ -58,8 +58,6 @@
     "react": "0.14.x || ^15.0.0 || ^16.0.0"
   },
   "dependencies": {
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-runtime": "6.x.x",
     "create-react-context": "^0.2.1",
     "popper.js": "^1.14.1",
     "prop-types": "^15.6.1",
@@ -73,6 +71,7 @@
     "babel-eslint": "^8.2.2",
     "babel-jest": "^22.4.3",
     "babel-plugin-external-helpers": "^6.22.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.6.1",

src/Popper.js

@@ -42,6 +42,7 @@ export type PopperProps = {
 
 type PopperState = {
   data: ?Data,
+  placement: ?Placement,
 };
 
 const initialStyle = {
@@ -64,6 +65,7 @@ export class InnerPopper extends React.Component<PopperProps, PopperState> {
 
   state = {
     data: undefined,
+    placement: undefined,
   };
 
   popperInstance: ?PopperJS$Instance;
@@ -91,7 +93,11 @@ export class InnerPopper extends React.Component<PopperProps, PopperState> {
     enabled: true,
     order: 900,
     fn: (data: Object) => {
-      this.setState({ data });
+      const { placement } = data;
+      this.setState(
+        { data, placement },
+        placement !== this.state.placement ? this.scheduleUpdate : undefined
+      );
       return data;
     },
   };
@@ -120,7 +126,7 @@ export class InnerPopper extends React.Component<PopperProps, PopperState> {
         };
 
   getPopperPlacement = () =>
-    !this.state.data ? undefined : this.state.data.placement;
+    !this.state.data ? undefined : this.state.placement;
 
   getArrowStyle = () =>
     !this.arrowNode || !this.state.data
@@ -158,7 +164,7 @@ export class InnerPopper extends React.Component<PopperProps, PopperState> {
     }
   };
 
-  componentDidUpdate(prevProps: PopperProps) {
+  componentDidUpdate(prevProps: PopperProps, prevState: PopperState) {
     // If the Popper.js options have changed, update the instance (destroy + create)
     if (
       this.props.placement !== prevProps.placement ||
@@ -167,6 +173,15 @@ export class InnerPopper extends React.Component<PopperProps, PopperState> {
       this.props.positionFixed !== prevProps.positionFixed
     ) {
       this.updatePopperInstance();
+      return;
+    }
+
+    // A placement difference in state means popper determined a new placement
+    // apart from the props value. By the time the popper element is rendered with
+    // the new position Popper has already measured it, if the place change triggers
+    // a size change it will result in a misaligned popper. So we schedule an update to be sure.
+    if (prevState.placement !== this.state.placement) {
+      this.scheduleUpdate();
     }
   }