fix(tag-picker): keep dropdown list aligned during parent container motion#36376
Open
PaulGMardling wants to merge 10 commits into
Open
fix(tag-picker): keep dropdown list aligned during parent container motion#36376PaulGMardling wants to merge 10 commits into
PaulGMardling wants to merge 10 commits into
Conversation
📊 Bundle size report
Unchanged fixtures
|
|
Pull request demo site: URL |
Author
@microsoft-github-policy-service agree company="Microsoft" |
PaulGMardling
commented
Jul 9, 2026
| @@ -0,0 +1,106 @@ | |||
| import * as React from 'react'; | |||
Author
There was a problem hiding this comment.
This file will be removed before merging.
It was used to demo the changes locally
PaulGMardling
changed the title
PaulGMardling
force-pushed
the
fix/tagpicker-dialog-misalignment
branch
from
5a868e9 to
56b1d30
Compare
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| @@ -0,0 +1,7 @@ | |||
| { | |||
There was a problem hiding this comment.
🕵🏾♀️ visual changes to review in the Visual Change Report
vr-tests-react-components/CalendarCompat 4 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/CalendarCompat.multiDayView.default.chromium.png | 843 | Changed |
| vr-tests-react-components/CalendarCompat.multiDayView.default.chromium_1.png | 849 | Changed |
| vr-tests-react-components/CalendarCompat.multiDayView - High Contrast.default.chromium.png | 3317 | Changed |
| vr-tests-react-components/CalendarCompat.multiDayView - Dark Mode.default.chromium.png | 3282 | Changed |
vr-tests-react-components/Menu Converged - submenuIndicator slotted content 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default.submenus open.chromium.png | 413 | Changed |
vr-tests-react-components/Positioning 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Positioning.Positioning end.chromium.png | 965 | Changed |
| vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png | 729 | Changed |
vr-tests-react-components/Skeleton converged 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Skeleton converged.Opaque Skeleton with square - Dark Mode.default.chromium.png | 2 | Changed |
vr-tests-react-components/TagPicker 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/TagPicker.disabled - RTL.disabled input hover.chromium.png | 635 | Changed |
There were 2 duplicate changes discarded. Check the build logs for more information.
PaulGMardling
changed the title
PaulGMardling
force-pushed
the
fix/tagpicker-dialog-misalignment
branch
from
56b1d30 to
fe08ac5
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Implementation Notes
I considered 3 paths to fix the stale position on reopen issue:
Expose a callback/state for when the Dialog entry animation finishes and defer rendering positioned content until it settles. Changes the Dialog API, pushes work onto every consumer, and only solves the dialog case.
Listen for animationend/transitionend on the ancestor and force a single update. Fragile: DialogSurface animates via the Web Animations API (no reliable transitionend), you have to guess which ancestor to watch, and the popover stays misaligned during the animation before snapping into place.
Add an updatePositionOnAnimationFrame option to the shared position manager that re-evaluates position each frame while mounted, so the popover tracks its target regardless of what moved it. TagPicker opts in; everything else is unaffected.
I chose this solution because it's the smallest and most robust change. It defaults to false (no behavior change for existing components — only TagPicker enables it), and keeps the dropdown aligned throughout the animation rather than only after it ends. Because it's a general option on react-positioning rather than a Dialog - or TagPicker - specific hack, any positioned component that hits the same class of problem — a target moved by ancestor animation, transforms, or other motion that doesn't trigger scroll/resize observers — can opt in with a single flag instead of reimplementing the workaround.
Previous Behavior
Opening a TagPicker popover inside a Dialog could produce incorrect popup alignment after dialog reopen when content is rendered during dialog entry motion. The popup position could be computed from transient animated geometry and remain offset.
New Behavior
TagPicker popover positioning now stays aligned with its trigger even when opened inside an animating Dialog surface. Positioning updates are refreshed during animation frames for this scenario, preventing stale offset coordinates on reopen.
Screen.Recording.2026-07-09.at.11.06.37.mov
Added/updated coverage:
Related Issue(s)
Fixes #35968