delayCalculatePosition prop (#465)

* delayCalculatePosition prop

* linter

* declaration file

Co-authored-by: James Liew <james.liew@instacart.com>

Author: james-carrots

src/components/Tooltip/Tooltip.d.ts

@@ -40,6 +40,8 @@ export interface TooltipProps {
   onShow(): void
 
   isVisible?: boolean
+
+  delayCalculatePosition?: boolean
 }
 
 declare const Tooltip: React.ComponentClass<TooltipProps>

src/components/Tooltip/Tooltip.js

@@ -35,6 +35,7 @@ class Tooltip extends PureComponent {
     onDismiss: PropTypes.func,
     onShow: PropTypes.func,
     isVisible: PropTypes.bool,
+    delayCalculatePosition: PropTypes.bool,
   }
 
   static defaultProps = {
@@ -99,6 +100,7 @@ class Tooltip extends PureComponent {
       snacksStyle,
       isVisible,
       overlayStyle,
+      delayCalculatePosition,
     } = this.props
 
     return (
@@ -110,6 +112,7 @@ class Tooltip extends PureComponent {
           show={isVisible || this.state.show}
           onRootClose={this.handleHideToolTip}
           style={overlayStyle}
+          delayCalculatePosition={delayCalculatePosition}
         >
           <InnerToolTip
             size={size}

src/components/Tooltip/TooltipOverlay.js

@@ -13,21 +13,36 @@ class TooltipOverlay extends PureComponent {
     onRootClose: PropTypes.func,
     rootCloseEnabled: PropTypes.bool,
     style: PropTypes.shape({}),
+    delayCalculatePosition: PropTypes.bool,
   }
 
   static defaultProps = {
     rootCloseEnabled: true,
   }
 
   render() {
-    const { show, children, target, placement, onRootClose, rootCloseEnabled, style } = this.props
+    const {
+      show,
+      children,
+      target,
+      placement,
+      onRootClose,
+      rootCloseEnabled,
+      style,
+      delayCalculatePosition,
+    } = this.props
 
     if (!show) {
       return false
     }
 
     let child = (
-      <TooltipPosition style={style} target={target} placement={placement}>
+      <TooltipPosition
+        style={style}
+        target={target}
+        placement={placement}
+        delayCalculatePosition={delayCalculatePosition}
+      >
         {children}
       </TooltipPosition>
     )

src/components/Tooltip/TooltipPosition.js

@@ -19,6 +19,7 @@ class TooltipPosition extends PureComponent {
     target: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
     placement: PropTypes.oneOf(['top', 'left', 'right', 'bottom']).isRequired,
     style: PropTypes.shape({}),
+    delayCalculatePosition: PropTypes.bool,
   }
 
   state = {
@@ -27,7 +28,18 @@ class TooltipPosition extends PureComponent {
   }
 
   componentDidMount() {
-    this.calculatePosition()
+    const { delayCalculatePosition } = this.props
+
+    if (delayCalculatePosition) {
+      // modified July 28, 2021. Need to delay calculatePosition function because documentWidth, overlay and targetRect may not be ready with the right sizes
+      // if we calculatePosition with these wrong sizes, we can't recalculate to the correct one in the next few frames, due to the side effects of calculatePosition
+      // (overlayRect values already set)
+      setTimeout(() => {
+        this.calculatePosition()
+      }, 300)
+    } else {
+      this.calculatePosition()
+    }
   }
 
   getTarget = () => {