Skip to content

fix(react): rebind withViewport across windows#36418

Open
Weichenleeeee123 wants to merge 4 commits into
microsoft:masterfrom
Weichenleeeee123:fix/35437-withviewport-window-change
Open

fix(react): rebind withViewport across windows#36418
Weichenleeeee123 wants to merge 4 commits into
microsoft:masterfrom
Weichenleeeee123:fix/35437-withviewport-window-change

Conversation

@Weichenleeeee123

Copy link
Copy Markdown

Summary

  • re-register withViewport resize handling when its root moves to a different DOM window
  • clean up the old window's ResizeObserver or fallback resize listener before registering with the destination window
  • honor an explicitly supplied window in getRect so popup viewport measurements use the popup rather than the global window
  • add regression coverage for observer and fallback-listener handoff, viewport measurement, and cross-window getRect

Root cause

withViewport kept its resize handling attached to the window used during mount and did not check whether the root element's owner window changed during an update.

After re-registering the observer, popup measurement was also blocked by the precedence of the nullish-coalescing and conditional expressions in getRect: a supplied popup window was treated as the conditional test and measurement fell back to the global window.

Validation

  • corepack yarn jest packages/react/src/utilities/decorators/withViewport.test.tsx --config packages/react/jest.config.js --runInBand --no-cache
  • corepack yarn jest packages/utilities/src/dom/getRect.test.ts --config packages/utilities/jest.config.js --runInBand --no-cache
  • corepack yarn nx run react:lint --skipNxCache
  • corepack yarn nx run utilities:lint --skipNxCache (passes with two pre-existing warnings in unrelated files)
  • corepack yarn beachball check --branch origin/master
  • real Chromium popup verification: the viewport measured 712px after moving, then updated to 924px when the popup viewport was resized to 940px
  • full utilities Jest suite passes locally
  • full React Jest suite passes except for two existing TimePicker assertions which expect English-formatted time; this machine uses the zh-CN locale (8:30:00 / 下午5:00:00)

Fixes #35437

Copilot AI review requested due to automatic review settings July 21, 2026 09:34
@Weichenleeeee123
Weichenleeeee123 requested a review from a team as a code owner July 21, 2026 09:34

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR fixes cross-window (e.g., iframe/popup) resizing and measurement behavior for Fluent UI v8 by ensuring withViewport rebinds its resize handling when the root element moves to a different DOM window, and by correcting getRect’s window-selection precedence so an explicitly supplied Window is honored.

Changes:

  • Update withViewport to track the active resize window, and to unregister/re-register ResizeObserver or the fallback resize listener when the owner window changes.
  • Fix getRect operator precedence so win (when provided) takes precedence over the conditional window selection.
  • Add regression tests covering cross-window observer/listener handoff and explicit-window getRect behavior, plus beachball change files for both published packages.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated no comments.

Show a summary per file
File Description
packages/utilities/src/dom/getRect.ts Fixes win ?? (cond ? ... : ...) grouping so an explicitly supplied window is used correctly.
packages/utilities/src/dom/getRect.test.ts Adds a regression test verifying getRect(frameWindow, frameWindow) measures the supplied window.
packages/react/src/utilities/decorators/withViewport.tsx Rebinds resize handling across window changes and centralizes register/unregister logic.
packages/react/src/utilities/decorators/withViewport.test.tsx Adds tests for ResizeObserver re-registration and fallback resize listener migration across windows.
change/@fluentui-utilities-c4e06b96-9dff-4a21-80c7-db044591d953.json Beachball change entry for the getRect fix.
change/@fluentui-react-486db03b-19ec-48a6-91b3-aa08d113d79e.json Beachball change entry for the withViewport fix.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: withViewport doesn't re-register ResizeObserver if element is portalled into a different window

2 participants