Skip to content

fix(splitter): keep the layout when the root resizes along the cross axis - #3545

Merged
segunadebayo merged 2 commits into
mainfrom
fix/splitter-preserve-layout-cross-axis
Oct 25, 2026
Merged

segunadebayo merged 2 commits into
mainfrom
fix/splitter-preserve-layout-cross-axis

Conversation

@segunadebayo

Copy link
Copy Markdown
Member

Fixes chakra-ui/ark#4228.

Problem

In a nested splitter, dragging the outer splitter snaps the inner splitter back to its default layout. Dragging where the two resize triggers meet makes the inner panels flicker between the pointer position and the default.

syncSize runs on every ROOT.RESIZE, and the ResizeObserver watches the whole border box. When the root changes size along the cross axis only (width, for a vertical splitter), the group size is unchanged, so canPreserveLayout is false and the code falls back to the resolved size ?? defaultSize, discarding the current layout.

Fix

When the group size is unchanged and the panels, size, and defaultSize props are the same as the last sync, keep the current layout. Prop changes still resolve from the props, so controlled size updates are unaffected. The props key is tracked in a ref rather than by checking the event type, because syncSize also runs from watch, where the event is whatever the machine received last.

Verification

  • New e2e test in /splitter/nested: resize the inner splitter, then drag the outer one. It fails without the fix (42 → 33) and passes with it.
  • Checked in the Ark React Storybook with the built package. During a corner drag, the inner top size used to go 50.6 → 50 → 51.9 → 50 → 53.1…; with the fix it moves steadily 63.2 → 72.

@vercel

vercel Bot commented Oct 25, 2026 •

Copy link
Copy Markdown

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

Project Deployment Actions Updated
zag-nextjs Ready Ready Preview Oct 25, 2026 9:47pm UTC
zag-solid Ready Ready Preview Oct 25, 2026 9:47pm UTC
zag-svelte Ready Ready Preview Oct 25, 2026 9:47pm UTC
zag-vue Ready Ready Preview Oct 25, 2026 9:47pm UTC
zag-website-v2 Building Building Preview Oct 25, 2026 9:47pm UTC
1 Skipped Deployment
Project Deployment Actions Updated
zag-website Ignored Ignored Preview Oct 25, 2026 9:47pm UTC

Request Review

@changeset-bot

changeset-bot Bot commented Oct 25, 2026 •

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 55e44da

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 85 packages
Name Type
@zag-js/splitter Patch
@zag-js/anatomy-icons Patch
@zag-js/anatomy Patch
@zag-js/core Patch
@zag-js/docs Patch
@zag-js/preact Patch
@zag-js/react Patch
@zag-js/solid Patch
@zag-js/svelte Patch
@zag-js/vanilla Patch
@zag-js/vue Patch
@zag-js/accordion Patch
@zag-js/angle-slider Patch
@zag-js/async-list Patch
@zag-js/avatar Patch
@zag-js/carousel Patch
@zag-js/cascade-select Patch
@zag-js/checkbox Patch
@zag-js/clipboard Patch
@zag-js/collapsible Patch
@zag-js/color-picker Patch
@zag-js/combobox Patch
@zag-js/date-input Patch
@zag-js/date-picker Patch
@zag-js/dialog Patch
@zag-js/drawer Patch
@zag-js/editable Patch
@zag-js/file-upload Patch
@zag-js/floating-panel Patch
@zag-js/hover-card Patch
@zag-js/image-cropper Patch
@zag-js/listbox Patch
@zag-js/marquee Patch
@zag-js/menu Patch
@zag-js/navigation-menu Patch
@zag-js/number-input Patch
@zag-js/pagination Patch
@zag-js/password-input Patch
@zag-js/pin-input Patch
@zag-js/popover Patch
@zag-js/presence Patch
@zag-js/progress Patch
@zag-js/qr-code Patch
@zag-js/radio-group Patch
@zag-js/rating-group Patch
@zag-js/scroll-area Patch
@zag-js/select Patch
@zag-js/signature-pad Patch
@zag-js/slider Patch
@zag-js/steps Patch
@zag-js/switch Patch
@zag-js/tabs Patch
@zag-js/tags-input Patch
@zag-js/timer Patch
@zag-js/toast Patch
@zag-js/toc Patch
@zag-js/toggle-group Patch
@zag-js/toggle Patch
@zag-js/tooltip Patch
@zag-js/tour Patch
@zag-js/tree-view Patch
@zag-js/store Patch
@zag-js/types Patch
@zag-js/aria-hidden Patch
@zag-js/auto-resize Patch
@zag-js/collection Patch
@zag-js/color-utils Patch
@zag-js/utils Patch
@zag-js/date-utils Patch
@zag-js/dismissable Patch
@zag-js/dom-query Patch
@zag-js/file-utils Patch
@zag-js/focus-trap Patch
@zag-js/focus-visible Patch
@zag-js/highlight-word Patch
@zag-js/hotkeys Patch
@zag-js/i18n-utils Patch
@zag-js/interact-outside Patch
@zag-js/json-tree-utils Patch
@zag-js/live-region Patch
@zag-js/popper Patch
@zag-js/rect-utils Patch
@zag-js/remove-scroll Patch
@zag-js/scroll-snap Patch
@zag-js/stringify-state Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

This branch was successfully deployed

4 active deployments
Preview – zag-solid — 55e44da9 Deployed Oct 25, 2026 by vercel[bot]
Preview – zag-vue — 55e44da9 Deployed Oct 25, 2026 by vercel[bot]
Preview – zag-svelte — 55e44da9 Deployed Oct 25, 2026 by vercel[bot]
Preview – zag-nextjs — 55e44da9 Deployed Oct 25, 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.

Splitter (nested) flickers on 2 axis drag

1 participant