fix: setPopperNode only to update popper instance for HTMLElement (#253)

Author: piecyk

.size-snapshot.json

@@ -1,25 +1,25 @@
 {
   "dist/index.umd.js": {
-    "bundled": 49703,
-    "minified": 17814,
-    "gzipped": 5717
+    "bundled": 49749,
+    "minified": 17751,
+    "gzipped": 5578
   },
   "dist/index.umd.min.js": {
-    "bundled": 25362,
-    "minified": 10181,
-    "gzipped": 3420
+    "bundled": 24376,
+    "minified": 10020,
+    "gzipped": 3347
   },
   "dist/index.esm.js": {
-    "bundled": 9794,
-    "minified": 5639,
-    "gzipped": 1769,
+    "bundled": 10105,
+    "minified": 5808,
+    "gzipped": 1838,
     "treeshaked": {
       "rollup": {
-        "code": 4637,
+        "code": 4604,
         "import_statements": 137
       },
       "webpack": {
-        "code": 5371
+        "code": 5725
       }
     }
   }

src/Popper.js

@@ -74,7 +74,7 @@ export class InnerPopper extends React.Component<PopperProps, PopperState> {
   arrowNode: ?HTMLElement = null;
 
   setPopperNode = (popperNode: ?HTMLElement) => {
-    if (this.popperNode === popperNode) return;
+    if (!popperNode || this.popperNode === popperNode) return;
 
     safeInvoke(this.props.innerRef, popperNode);
     this.popperNode = popperNode;
@@ -83,10 +83,7 @@ export class InnerPopper extends React.Component<PopperProps, PopperState> {
   };
 
   setArrowNode = (arrowNode: ?HTMLElement) => {
-    if (this.arrowNode === arrowNode) return;
     this.arrowNode = arrowNode;
-
-    if (!this.popperInstance) this.updatePopperInstance();
   };
 
   updateStateModifier = {
@@ -192,6 +189,7 @@ export class InnerPopper extends React.Component<PopperProps, PopperState> {
   }
 
   componentWillUnmount() {
+    safeInvoke(this.props.innerRef, null);
     this.destroyPopperInstance();
   }
 
@@ -218,7 +216,9 @@ export default function Popper({ referenceElement, ...props }: PopperProps) {
     <ManagerContext.Consumer>
       {({ referenceNode }) => (
         <InnerPopper
-          referenceElement={referenceElement ? referenceElement : referenceNode}
+          referenceElement={
+            referenceElement !== undefined ? referenceElement : referenceNode
+          }
           {...props}
         />
       )}

src/Popper.test.js

@@ -71,7 +71,7 @@ describe('Popper component', () => {
     const referenceElement = document.createElement('div');
     expect(() =>
       mount(
-        <InnerPopper referenceElemen={referenceElement}>
+        <InnerPopper referenceElement={referenceElement}>
           {({ ref, style, placement, arrowProps }) => (
             <div
               ref={current => ref(current)}

src/__mocks__/popper.js.js

@@ -8,13 +8,41 @@ export default class Popper {
   };
 
   constructor(reference, popper, options = {}) {
+    const modifiers = Object.keys(options.modifiers)
+      .map(name => ({
+        name,
+        ...options.modifiers[name],
+      }))
+      .sort((a, b) => a.order - b.order);
+
+    const update = () => {
+      const data = {
+        placement: options.placement,
+        arrowStyles: {},
+        offsets: {
+          popper: {
+            position: 'absolute',
+          },
+          reference: {},
+        },
+      };
+      modifiers.forEach(m => {
+        if (m.enabled && m.fn) {
+          m.fn(data, m);
+        }
+      });
+    };
+    update();
+
     return {
       reference,
       popper,
       options: { ...Popper.Defaults, ...options },
       state: this.state,
       destroy: () => (this.state.isDestroyed = true),
-      scheduleUpdate: () => {},
+      scheduleUpdate: () => {
+        update();
+      },
     };
   }
 }

src/__snapshots__/Popper.test.js.snap

@@ -8,13 +8,10 @@ exports[`Popper component renders the expected markup 1`] = `
   referenceElement={<div />}
 >
   <div
+    data-placement="bottom"
     style={
       Object {
-        "left": 0,
-        "opacity": 0,
-        "pointerEvents": "none",
         "position": "absolute",
-        "top": 0,
       }
     }
   >

yarn.lock

@@ -2048,9 +2048,10 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-create-react-context@^0.2.1, create-react-context@^0.2.2:
+create-react-context@<=0.2.2, create-react-context@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.2.tgz#9836542f9aaa22868cd7d4a6f82667df38019dca"
+  integrity sha512-KkpaLARMhsTsgp0d2NA/R94F/eDLbhXERdIq3LvX2biCAXcDvHYoOqHfWCHf1+OLj+HKBotLG3KqaOOf+C1C+A==
   dependencies:
     fbjs "^0.8.0"
     gud "^1.0.0"