fix: Regression introduced by floating-ui#596 (floating-ui#599)

More details here: floating-ui/react-popper#122
4EPHblN · Apr 4, 2018 · 87f1d81 · 87f1d81
1 parent a3995a2
commit 87f1d81
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 13 deletions.
diff --git a/packages/popper/src/methods/update.js b/packages/popper/src/methods/update.js
@@ -2,7 +2,6 @@ import computeAutoPlacement from '../utils/computeAutoPlacement';
 import getReferenceOffsets from '../utils/getReferenceOffsets';
 import getPopperOffsets from '../utils/getPopperOffsets';
 import runModifiers from '../utils/runModifiers';
-import getSupportedPropertyName from '../utils/getSupportedPropertyName';
 
 /**
  * Updates the position of the popper, computing the new offsets and applying
@@ -26,14 +25,6 @@ export default function update() {
     offsets: {},
   };
 
-  // NOTE: DOM access here
-  // resets the popper's position so that the document size can be calculated excluding
-  // the size of the popper element itself
-  const popperStyles = this.popper.style;
-  popperStyles.top = '';
-  popperStyles.left = '';
-  popperStyles[getSupportedPropertyName('transform')] = '';
-
   // compute reference element offsets
   data.offsets.reference = getReferenceOffsets(
     this.state,
@@ -65,7 +56,10 @@ export default function update() {
     data.offsets.reference,
     data.placement
   );
-  data.offsets.popper.position = this.options.positionFixed ? 'fixed' : 'absolute';
+
+  data.offsets.popper.position = this.options.positionFixed
+    ? 'fixed'
+    : 'absolute';
 
   // run the modifiers
   data = runModifiers(this.modifiers, data);

diff --git a/packages/popper/src/modifiers/preventOverflow.js b/packages/popper/src/modifiers/preventOverflow.js
@@ -1,5 +1,6 @@
 import getOffsetParent from '../utils/getOffsetParent';
 import getBoundaries from '../utils/getBoundaries';
+import getSupportedPropertyName from '../utils/getSupportedPropertyName';
 
 /**
  * @function
@@ -19,13 +20,30 @@ export default function preventOverflow(data, options) {
     boundariesElement = getOffsetParent(boundariesElement);
   }
 
+  // NOTE: DOM access here
+  // resets the popper's position so that the document size can be calculated excluding
+  // the size of the popper element itself
+  const transformProp = getSupportedPropertyName('transform');
+  const popperStyles = data.instance.popper.style; // assignment to help minification
+  const { top, left, [transformProp]: transform } = popperStyles;
+  popperStyles.top = '';
+  popperStyles.left = '';
+  popperStyles[transformProp] = '';
+
   const boundaries = getBoundaries(
     data.instance.popper,
     data.instance.reference,
     options.padding,
     boundariesElement,
     data.positionFixed
   );
+
+  // NOTE: DOM access here
+  // restores the original style properties after the offsets have been computed
+  popperStyles.top = top;
+  popperStyles.left = left;
+  popperStyles[transformProp] = transform;
+
   options.boundaries = boundaries;
 
   const order = options.priority;
@@ -60,9 +78,8 @@ export default function preventOverflow(data, options) {
   };
 
   order.forEach(placement => {
-    const side = ['left', 'top'].indexOf(placement) !== -1
-      ? 'primary'
-      : 'secondary';
+    const side =
+      ['left', 'top'].indexOf(placement) !== -1 ? 'primary' : 'secondary';
     popper = { ...popper, ...check[side](placement) };
   });