diff --git a/packages/react/src/internal/FloatingMenu.js b/packages/react/src/internal/FloatingMenu.js index cd8f53c9867e..a64b952533fc 100644 --- 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); + } + } + } + ); } } };