fix: avoid stale FloatingMenu position updates (#22284)

adamalston · web-flow · commit 47ec1aa50842 · 2026-05-21T19:05:56.000Z
diff --git a/packages/react/src/internal/FloatingMenu.tsx b/packages/react/src/internal/FloatingMenu.tsx
@@ -314,13 +314,17 @@ export const FloatingMenu = ({
         });
 
         // Only update if the position has actually changed.
-        if (
-          !floatingPosition ||
-          floatingPosition.left !== newFloatingPosition.left ||
-          floatingPosition.top !== newFloatingPosition.top
-        ) {
-          setFloatingPosition(newFloatingPosition);
-        }
+        setFloatingPosition((prev) => {
+          if (
+            prev &&
+            prev.left === newFloatingPosition.left &&
+            prev.top === newFloatingPosition.top
+          ) {
+            return prev;
+          }
+
+          return newFloatingPosition;
+        });
 
         // Re-check after setting the position if not already adjusting.
         if (!isAdjustment) {
@@ -334,15 +338,7 @@ export const FloatingMenu = ({
         }
       }
     },
-    [
-      triggerRef,
-      menuOffset,
-      menuDirection,
-      flipped,
-      target,
-      updateOrientation,
-      floatingPosition,
-    ]
+    [triggerRef, menuOffset, menuDirection, flipped, target, updateOrientation]
   );
 
   const focusMenuContent = (menuBody: HTMLElement) => {
diff --git a/packages/react/src/internal/__tests__/FloatingMenu-test.js b/packages/react/src/internal/__tests__/FloatingMenu-test.js
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, { Profiler } from 'react';
 import {
   act,
   fireEvent,
@@ -389,4 +389,63 @@ describe('FloatingMenu', () => {
       expect(menu.style.top).toBe('60px');
     });
   });
+
+  it('should not commit again when repeated resizes keep the same updated menu position', async () => {
+    const remove = jest.fn();
+    let resizeCallback;
+    const onRender = jest.fn();
+    const trigger = document.createElement('button');
+    const triggerRef = { current: trigger };
+    const target = () => document.body;
+
+    trigger.setAttribute('data-testid', 'trigger');
+    document.body.appendChild(trigger);
+
+    jest.spyOn(OptimizedResize, 'add').mockImplementation((callback) => {
+      resizeCallback = callback;
+      return { remove };
+    });
+
+    render(
+      <Profiler id="floating-menu" onRender={onRender}>
+        <FloatingMenu
+          triggerRef={triggerRef}
+          menuOffset={defaultMenuOffset}
+          target={target}>
+          {defaultMenuChildren}
+        </FloatingMenu>
+      </Profiler>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('menu').style.left).toBe('-23px');
+      expect(screen.getByTestId('menu').style.top).toBe('65px');
+    });
+
+    triggerRect = createRect({
+      left: 50,
+      top: 20,
+      right: 70,
+      bottom: 60,
+      width: 20,
+      height: 40,
+    });
+
+    act(() => {
+      resizeCallback();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('menu').style.left).toBe('17px');
+      expect(screen.getByTestId('menu').style.top).toBe('65px');
+    });
+
+    const commitCountAfterPositionChange = onRender.mock.calls.length;
+
+    act(() => {
+      resizeCallback();
+    });
+
+    expect(onRender).toHaveBeenCalledTimes(commitCountAfterPositionChange);
+  });
 });
