fix(tooltip): Fix tooltip alignment aligned on right hand side of container (#9606)

TuxedoFish · tay1orjones · kodiakhq[bot] · web-flow · commit 3af8a9422a5e · 2021-10-06T07:19:02.000Z
* fix(tooltip): add auto-update on set state

* fix(tooltip): safely check the size is different

Co-authored-by: Taylor Jones &lt;tay1orjones@users.noreply.github.com&gt;
Co-authored-by: kodiakhq[bot] &lt;49736102+kodiakhq[bot]@users.noreply.github.com&gt;
diff --git a/packages/react/src/internal/FloatingMenu.js b/packages/react/src/internal/FloatingMenu.js
@@ -261,7 +261,7 @@ class FloatingMenu extends React.Component {
    *
    * @private
    */
-  _updateMenuSize = (prevProps = {}) => {
+  _updateMenuSize = (prevProps = {}, isAdjustment = false) => {
     const menuBody = this._menuBody;
     warning(
       menuBody,
@@ -279,7 +279,8 @@ class FloatingMenu extends React.Component {
 
     if (
       hasChangeInOffset(oldMenuOffset, menuOffset) ||
-      oldMenuDirection !== menuDirection
+      oldMenuDirection !== menuDirection ||
+      isAdjustment
     ) {
       const { flipped, triggerRef } = this.props;
       const { current: triggerEl } = triggerRef;
@@ -293,20 +294,30 @@ class FloatingMenu extends React.Component {
       // a) Menu body has `display:none`
       // b) `menuOffset` as a callback returns `undefined` (The callback saw that it couldn't calculate the value)
       if ((menuSize.width > 0 && menuSize.height > 0) || !offset) {
-        this.setState({
-          floatingPosition: getFloatingPosition({
-            menuSize,
-            refPosition,
-            direction: menuDirection,
-            offset,
-            scrollX: window.pageXOffset,
-            scrollY: window.pageYOffset,
-            container: {
-              rect: this.props.target().getBoundingClientRect(),
-              position: getComputedStyle(this.props.target()).position,
-            },
-          }),
-        });
+        this.setState(
+          {
+            floatingPosition: getFloatingPosition({
+              menuSize,
+              refPosition,
+              direction: menuDirection,
+              offset,
+              scrollX: window.pageXOffset,
+              scrollY: window.pageYOffset,
+              container: {
+                rect: this.props.target().getBoundingClientRect(),
+                position: getComputedStyle(this.props.target()).position,
+              },
+            }),
+          },
+          () => {
+            if (!isAdjustment) {
+              const newMenuSize = menuBody.getBoundingClientRect();
+              if (newMenuSize !== menuSize) {
+                this._updateMenuSize(this.props, true);
+              }
+            }
+          }
+        );
       }
     }
   };
