Skip to content

fix: honor box changes when measuring parent size - #107

Merged
bvaughn merged 3 commits into
bvaughn:mainfrom
feritcemkahraman:fix/update-box-measurements
Oct 16, 2026
Merged

bvaughn merged 3 commits into
bvaughn:mainfrom
feritcemkahraman:fix/update-box-measurements

Conversation

@feritcemkahraman

@feritcemkahraman feritcemkahraman commented Oct 16, 2026 •

Copy link
Copy Markdown
Contributor

Changing AutoSizer's box prop after mounting leaves measurements using the original box model. Switching from border-box to content-box should immediately remove padding and borders from the reported size, even without another resize event.

Keep box in the existing stable values ref and remeasure in a layout effect when it changes. Both observer and fallback subscriptions remain stable. Read computed styles from the measured element's own window.

Validation: the immediate fallback regressions and stable-observer regression failed on the previous revision; all 7 unit tests, full TypeScript, ESLint, formatting, and the library CJS/ESM/declaration build pass. Docs/examples were generated earlier with a temporary, restored Windows tooling adapter; the review changes leave the public API and generated content unchanged. Browser integration and cross-document browser tests were not run.

@vercel

vercel Bot commented Oct 16, 2026

Copy link
Copy Markdown

@feritcemkahraman is attempting to deploy a commit to the Brian Vaughn's projects Team on Vercel.

A member of the Team first needs to authorize it.

@bvaughn bvaughn left a comment

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

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

This seems like a problem worth fixing, so thanks for pointing it out 👍🏼

I think the fix might be too narrowly focused, because it doesn't handle the fallback case:

} else {
// Defer requiring resize handler in order to support server-side rendering.
// See github.com/bvaughn/react-virtualized-auto-sizer/issues/41
const detectElementResize = createDetectElementResize(nonce);
detectElementResize.addResizeListener(parentNode, onResizeStable);
return () => {
detectElementResize.removeResizeListener(parentNode, onResizeStable);
};
}

Admittedly this case is probably only very rarely used but even so it seems like it would be nice to fix both 😄

We could do that by adding box to the stableValuesRef, updating the callback ref to read box from that ref instead, and then re-evaluating the callback if the prop changes:

useLayoutEffect(() => {
  stableValuesRef.current.box = box;
  onResizeStableRef.current();
}, [box]);

If you're down for making that change– awesome. If not, I'm happy to chip in.

🔔 @bvaughn

Comment thread lib/hooks/useSize.ts Outdated

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

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

While we're in here we could fix this too:

Suggested change
cons getComputedStyle = parentNode.ownerDocument.defaultView.getComputedStyle;
const style = getComputedStyle(parentNode) || {};

@vercel

vercel Bot commented Oct 16, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
react-virtualized-auto-sizer Ready Ready Preview Oct 16, 2026 8:53pm UTC

@bvaughn
bvaughn merged commit 5106589 into bvaughn:main Oct 16, 2026
7 checks passed
@bvaughn

bvaughn commented Oct 16, 2026

Copy link
Copy Markdown
Owner

Published in 2.0.4: https://github.com/bvaughn/react-virtualized-auto-sizer/releases/tag/2.0.4

Thanks again!

This branch was successfully deployed

1 active deployment
Preview — 15321e22 Deployed Oct 16, 2026 by vercel[bot]
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.

2 participants