chore: move force update on observe to the manager

Author: bsunderhus

packages/react-components/priority-overflow/src/overflowManager.test.ts

@@ -223,4 +223,40 @@ describe('overflowManager', () => {
 
     expect(manager.getSnapshot().itemVisibility).toEqual({});
   });
+
+  it('applies a forceUpdate requested before observe once observation starts (deferred first paint)', () => {
+    const manager = createOverflowManager(createObserveOptions());
+    const container = createContainer(100);
+    const itemA = createElementWithSize('button', 60);
+    const itemB = createElementWithSize('button', 60);
+    const menu = createElementWithSize('button', 30);
+
+    manager.addItem({ element: itemA, id: 'a', priority: 1 });
+    manager.addItem({ element: itemB, id: 'b', priority: 0 });
+    manager.addOverflowMenu(menu);
+
+    // forceUpdate before observe can't compute anything yet; the manager defers it and observe()
+    // applies it — so overflow is resolved synchronously without passing the forceUpdate option.
+    manager.forceUpdate();
+    manager.observe(container);
+
+    expect(getVisibleIds(manager)).toEqual(['a']);
+    expect(getInvisibleIds(manager)).toEqual(['b']);
+  });
+
+  it('does not apply a deferred forceUpdate when the container is not measured', () => {
+    const manager = createOverflowManager(createObserveOptions());
+    const container = createContainer(0);
+    const itemA = createElementWithSize('button', 60);
+    const itemB = createElementWithSize('button', 60);
+
+    manager.addItem({ element: itemA, id: 'a', priority: 1 });
+    manager.addItem({ element: itemB, id: 'b', priority: 0 });
+
+    // Degenerate 0 size — observe() skips the deferred force so nothing collapses.
+    manager.forceUpdate();
+    manager.observe(container);
+
+    expect(manager.getSnapshot().itemVisibility).toEqual({});
+  });
 });

packages/react-components/priority-overflow/src/overflowManager.ts

@@ -44,6 +44,7 @@ export function createOverflowManager(initialOptions: Partial<OverflowOptions> =
   // If true, next update will dispatch to onUpdateOverflow even if queue top states don't change
   // Initially true to force dispatch on first mount
   let forceDispatch = true;
+  let forceUpdateOnObserve = false;
   const options: Required<OverflowOptions> = { ...DEFAULT_OPTIONS, ...initialOptions };
   const overflowItems: Record<string, OverflowItemEntry> = {};
   const overflowDividers: Record<string, OverflowDividerEntry> = {};
@@ -236,6 +237,13 @@ export function createOverflowManager(initialOptions: Partial<OverflowOptions> =
   };
 
   const forceUpdate: OverflowManager['forceUpdate'] = () => {
+    if (!container) {
+      // Not observing yet — there is nothing to measure. Remember the request and let observe()
+      // honor it once the container is being observed (first-paint correctness).
+      forceUpdateOnObserve = true;
+      return;
+    }
+
     if (processOverflowItems() || forceDispatch) {
       forceDispatch = false;
       dispatchOverflowUpdate();
@@ -283,9 +291,10 @@ export function createOverflowManager(initialOptions: Partial<OverflowOptions> =
       update();
     });
 
-    if (shouldForceUpdate && getClientSize(observedContainer) > 0) {
+    if ((shouldForceUpdate || forceUpdateOnObserve) && getClientSize(observedContainer) > 0) {
       forceUpdate();
     }
+    forceUpdateOnObserve = false;
   };
 
   const disconnect: OverflowManager['disconnect'] = () => {
@@ -298,6 +307,7 @@ export function createOverflowManager(initialOptions: Partial<OverflowOptions> =
     container = undefined;
     observing = false;
     forceDispatch = true;
+    forceUpdateOnObserve = false;
 
     // clear all entries
     Object.keys(overflowItems).forEach(itemId => removeItem(itemId));

packages/react-components/react-overflow/library/src/useOverflowContainer.ts

@@ -56,27 +56,17 @@ export const useOverflowContainer = <TElement extends HTMLElement>(
 
   const managerRef = React.useRef<OverflowManager | null>(null);
 
-  // Whether the container's observe effect has run. Item/menu hooks request first-paint correctness
-  // via `forceUpdateOverflow`; before the container observes there is nothing to compute yet, so the
-  // request is recorded here and honored when the observe effect runs.
-  const hasObservedRef = React.useRef(false);
-  // Set when a descendant requests first-paint correctness before the container observes. The default
-  // item/menu hooks make this request; a hook that omits it opts the container out of the synchronous
-  // first-paint pass (the hot path), letting the ResizeObserver drive the first overflow pass instead.
-  const pendingForceUpdateRef = React.useRef(false);
-
   if (managerRef.current === null) {
     managerRef.current = canUseDOM() ? createOverflowManager(observeOptions) : null;
   }
 
   useIsomorphicLayoutEffect(() => {
     if (managerRef.current && containerRef.current) {
-      // Child item/menu effects already ran (child-before-parent), so `pendingForceUpdateRef`
-      // reflects whether any descendant requested first-paint correctness. When requested, resolve
-      // overflow synchronously so the first paint is correct; the manager guards the force on the
-      // container being measured.
-      managerRef.current.observe(containerRef.current, { forceUpdate: pendingForceUpdateRef.current });
-      hasObservedRef.current = true;
+      // First-paint correctness is requested by descendants (the default item/menu hooks call
+      // forceUpdateOverflow during their layout effects, which commit before this one). The manager
+      // honors any such pre-observe request here, guarded on the container being measured. A consumer
+      // whose item hook omits that request opts out — the ResizeObserver drives the first pass.
+      managerRef.current.observe(containerRef.current);
       return () => managerRef.current?.disconnect();
     }
   }, []);
@@ -132,14 +122,9 @@ export const useOverflowContainer = <TElement extends HTMLElement>(
   );
 
   const forceUpdateOverflow = React.useCallback(() => {
-    // Before the container observes, a force can't compute anything (it isn't observing yet), so
-    // record the request and let the observe effect honor it (first-paint correctness). After
-    // observing, force directly.
-    if (hasObservedRef.current) {
-      managerRef.current?.forceUpdate();
-    } else {
-      pendingForceUpdateRef.current = true;
-    }
+    // The manager handles the before/after-observe distinction: a call before observation is
+    // recorded and applied once it observes (first-paint correctness); a call after forces directly.
+    managerRef.current?.forceUpdate();
   }, []);
 
   return {

packages/react-components/react-overflow/library/src/useOverflowItem.ts

@@ -43,11 +43,11 @@ export function useOverflowItem<TElement extends HTMLElement>(
         groupId,
         pinned,
       });
-      // Request first-paint correctness. Before the container observes this defers a synchronous
-      // force to the container's observe effect; after, it recomputes for the (re)registered item.
-      // An item hook that omits this call opts the container out of the synchronous first-paint pass.
       forceUpdateOverflow();
-      return unregister;
+      return () => {
+        unregister();
+        forceUpdateOverflow();
+      };
     }
   }, [id, priority, registerItem, forceUpdateOverflow, groupId, pinned]);