fix: setPopperNode only to update popper instance for HTMLElement

.size-snapshot.json

@@ -1,25 +1,25 @@
 {
   "dist/index.umd.js": {
-    "bundled": 49703,
-    "minified": 17814,
-    "gzipped": 5717
+    "bundled": 49757,
+    "minified": 17740,
+    "gzipped": 5565
   },
   "dist/index.umd.min.js": {
-    "bundled": 25362,
-    "minified": 10181,
-    "gzipped": 3420
+    "bundled": 24384,
+    "minified": 10009,
+    "gzipped": 3336
   },
   "dist/index.esm.js": {
-    "bundled": 9794,
-    "minified": 5639,
-    "gzipped": 1769,
+    "bundled": 10112,
+    "minified": 5788,
+    "gzipped": 1827,
     "treeshaked": {
       "rollup": {
-        "code": 4637,
+        "code": 4593,
         "import_statements": 137
       },
       "webpack": {
-        "code": 5371
+        "code": 5714
       }
     }
   }

src/Popper.js

@@ -11,7 +11,7 @@ import type { Style } from 'typed-styles';
 import { ManagerContext } from './Manager';
 import { safeInvoke, unwrapArray } from './utils';
 
-type getRefFn = (?HTMLElement) => void;
+type getRefFn = (HTMLElement | null) => void;
 type ReferenceElement = ReferenceObject | HTMLElement | null;
 type StyleOffsets = { top: number, left: number };
 type StylePosition = { position: 'absolute' | 'fixed' };
@@ -59,7 +59,7 @@ export class InnerPopper extends React.Component<PopperProps, PopperState> {
   static defaultProps = {
     placement: 'bottom',
     eventsEnabled: true,
-    referenceElement: undefined,
+    referenceElement: null,
     positionFixed: false,
   };
 
@@ -68,22 +68,22 @@ export class InnerPopper extends React.Component<PopperProps, PopperState> {
     placement: undefined,
   };
 
-  popperInstance: ?Instance;
+  popperInstance: Instance | null;
 
-  popperNode: ?HTMLElement = null;
-  arrowNode: ?HTMLElement = null;
+  popperNode: HTMLElement | null = null;
+  arrowNode: HTMLElement | null = null;
 
-  setPopperNode = (popperNode: ?HTMLElement) => {
-    if (this.popperNode === popperNode) return;
+  setPopperNode = (popperNode: HTMLElement | null) => {
+    if (!popperNode || this.popperNode === popperNode) return;
 
     safeInvoke(this.props.innerRef, popperNode);
     this.popperNode = popperNode;
 
     this.updatePopperInstance();
   };
 
-  setArrowNode = (arrowNode: ?HTMLElement) => {
-    if (this.arrowNode === arrowNode) return;
+  setArrowNode = (arrowNode: HTMLElement | null) => {
+    if (!arrowNode || this.arrowNode === arrowNode) return;
     this.arrowNode = arrowNode;
 
     if (!this.popperInstance) this.updatePopperInstance();
@@ -94,10 +94,7 @@ export class InnerPopper extends React.Component<PopperProps, PopperState> {
     order: 900,
     fn: (data: Object) => {
       const { placement } = data;
-      this.setState(
-        { data, placement },
-        placement !== this.state.placement ? this.scheduleUpdate : undefined
-      );
+      this.setState({ data, placement });
       return data;
     },
   };
@@ -218,7 +215,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"