[Bug]: Overflow manager stale state after item reorder (via React)

[skippone]

Component

Overflow

Package version

9.7.1

React version

18.2.0

Environment

System:
    OS: Linux 6.8 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (32) x64 AMD EPYC 7763 64-Core Processor
    Memory: 90.31 GB / 125.79 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Browsers:
    Chrome: 143.0.7499.192
  npmPackages:
    @types/react: patch:@types/react@npm%3A18.3.12#~/.yarn/patches/@types-react-npm-18.3.12-69c5fbaab9.patch => 18.3.12 
    @types/react-dom: ^18.3.0 => 18.3.5 
    react: ^18.2.0 => 18.3.1 
    react-dom: ^18.2.0 => 18.3.1

Current Behavior

When items wrapped in Overflow and OverflowItem respectively overflow, the subsequent change of ordering does not reapply keeping previously "overflown" items hidden.

Once overflow logic is triggered again (for example by resizing) the order is properly restored.

See also Stackblitz repro.

Expected Behavior

Items should be reordered correctly immediately after state change.

Reproduction

https://stackblitz.com/edit/oknghi3z?file=src%2FApp.tsx

Steps to reproduce

1. Render a list of items inside of Overflow, each wrapped with OverflowItem
2. Trigger overflow by making a viewport smaller
3. Reorder items via React
4. Observe the issue

Are you reporting an Accessibility issue?

None

Suggested severity

Urgent - No workaround and Products/sites are affected

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[mainframev]

Hello @skippone

I think it's more a limitation rather than a bug: the priority prop is the intended mechanism for controlling overflow order dynamically. DOM order is only a static tiebreaker for equal-priority items viamcompareDocumentPosition, and it isn't tracked reactively - useOverflowItem's effect deps are [id, priority, registerItem, groupId, pinned], so a DOM-only reorder doesn't trigger re-registration.

If you truly need a DOM reorder (e.g. drag-and-drop where visual position must also change), you can use useOverflowContext from @fluentui/react-overflow, which exposes updateOverflow. Drop a render-null component inside the <Overflow> tree that calls it from a layout effect whenever the order changes, try this workaround