Skip to content

Support grids portaled into another window - #4194

Open
nstepien wants to merge 4 commits into
mainfrom
resize-observer-realm
Open

nstepien wants to merge 4 commits into
mainfrom
resize-observer-realm

Conversation

@nstepien

@nstepien nstepien commented Sep 24, 2026 •

Copy link
Copy Markdown
Collaborator

Fixes #4184

When the grid is portaled into another window (e.g. an iframe, or a popup via window.open()), its DOM nodes belong to that window, while its JS still runs in the opener's window. A few places assumed both were the same:

  • useGridDimensions: the module-level ResizeObserver was created in the opener's realm, so resize notifications were processed on the opener's rendering timeline, which can be throttled while the user interacts with the popup. We now lazily create one ResizeObserver per window (keyed in a WeakMap), derived from the grid element's ownerDocument.defaultView.
  • Keyboard navigation: target instanceof Element is always false for elements from another window, so the grid ignored arrow keys, Tab, Home/End, PageUp/PageDown, and typing to start editing. Replaced with a nodeType check (isElement).
  • Tab out of an editor: onEditorNavigation used instanceof HTMLInputElement/HTMLTextAreaElement/HTMLSelectElement. Replaced with isElement(target) && target.matches('input, textarea, select').
  • Commit on outside click: EditCell listened for mousedown on the opener's window, which never receives clicks from the other window. It now listens on the editor's window, and schedules/cancels the fallback check with that window's scheduler.postTask/requestAnimationFrame.

Tests live in test/browser/crossWindow.test.tsx (renamed from gridDimensions.test.tsx), and render the grid into an iframe via createPortal, using page.frameLocator() for real user interactions. The commit history has each test failing first.

The requestAnimationFrame part isn't covered by a test: it only matters when postTask is unavailable and the opener window is hidden, which can't be simulated here.

🤖 Generated with Claude Code

nstepien and others added 2 commits September 24, 2026 02:30
When the grid is portaled into another window (iframe, popup),
it should be observed by that window's ResizeObserver.

Refs #4184

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Lazily create one ResizeObserver per window, derived from the grid
element's ownerDocument, instead of a single module-level observer
created in the realm the module was loaded in.

Fixes #4184

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@codecov-commenter

codecov-commenter commented Sep 24, 2026 •

Copy link
Copy Markdown

⚠️ Please install the 'codecov app svg image' to ensure uploads and comments are reliably processed by Codecov.

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 98.41%. Comparing base (5110b86) to head (404a35b).

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #4194      +/-   ##
==========================================
+ Coverage   98.30%   98.41%   +0.10%     
==========================================
  Files          45       45              
  Lines        1943     1950       +7     
  Branches      732      727       -5     
==========================================
+ Hits         1910     1919       +9     
+ Misses         33       31       -2     
Files with missing lines Coverage Δ
src/DataGrid.tsx 98.88% <100.00%> (ø)
src/EditCell.tsx 97.01% <100.00%> (ø)
src/hooks/useGridDimensions.ts 100.00% <100.00%> (ø)
src/utils/domUtils.ts 100.00% <100.00%> (ø)
src/utils/keyboardUtils.ts 100.00% <100.00%> (+10.00%) ⬆️
🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

nstepien and others added 2 commits September 24, 2026 02:56
Rename gridDimensions.test.tsx to crossWindow.test.tsx, and add
expected-failure tests for keyboard navigation, Tab navigation out of
an editor, and committing an editor on outside clicks, when the grid
is rendered into an iframe.

Refs #4184

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
…r window

- Replace `instanceof` checks, which fail for elements from another
  window, with a `nodeType` check and `matches()`
- Listen for outside `mousedown` events, and schedule the commit check,
  on the window the editor is rendered in

Fixes #4184

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@nstepien nstepien changed the title useGridDimensions: use the ResizeObserver of the grid's window Support grids portaled into another window Sep 24, 2026
@nstepien
nstepien marked this pull request as ready for review September 24, 2026 02:08
@nstepien nstepien self-assigned this Sep 24, 2026

This branch has not been deployed

No deployments
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.

useGridDimensions creates the ResizeObserver in the opener's realm when the grid is portaled into another window

2 participants