[Bug]: TagPicker dropdown misaligned when opened inside Dialog with entry animation

[bsunderhus]

Component

TagPicker

Package version

9.73.7

React version

18.3.1

Environment

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  npmPackages:
    @fluentui/react-components: ^9.0.0 => 9.73.7 
    @types/react: ^17 => 17.0.91 
    @types/react-dom: ^17 => 17.0.26 
    react: ^18 => 18.3.1 
    react-dom: ^18 => 18.3.1

Current Behavior

When a TagPicker with open={true} is rendered inside a Dialog, the dropdown list appears misaligned on the second and subsequent dialog opens. The dropdown is offset from the input by approximately 40px horizontally and 21px vertically.

This occurs because the Dialog component animates its DialogSurface on open using the Web Animations API (250ms duration). When the TagPicker dropdown is forced open immediately (e.g., to show pre-loaded suggestions), Fluent's positioning library calculates the dropdown's transform: translate3d(...) coordinates using the DialogSurface's mid-animation getBoundingClientRect() values. The position is never recalculated after the animation settles.

The first dialog open is typically unaffected because data has not been cached yet — by the time suggestions load, the animation has completed. On subsequent opens, cached data causes the dropdown to render instantly while the animation is still in progress.

Expected Behavior

The TagPicker dropdown should appear correctly aligned with the input regardless of whether the parent Dialog is animating. Either:

• The positioning library should recalculate after ancestor animations complete
• The positioning should account for in-progress animations on ancestor elements
• The Dialog component should expose a callback or state indicating when its entry animation has finished, allowing consumers to defer rendering positioned content

Reproduction

https://stackblitz.com/edit/s61l7p9p?file=src%2Fexample.tsx

Steps to reproduce

1. Open the reproduction
2. Click "Open dialog" — the TagPicker dropdown appears inside the dialog with options listed. On the first open, the dropdown is correctly aligned (data was not cached yet, so it loads after the animation completes).
3. Close the dialog
4. Click "Open dialog" again — the dropdown is now misaligned, shifted to the right and below the input. This is because the options are already cached and render instantly, before the DialogSurface's 250ms entry animation finishes.
5. Close and reopen — the misalignment persists on every subsequent open.

Are you reporting an Accessibility issue?

no

Suggested severity

Urgent - No workaround and Products/sites are affected

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

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.