Skip to content

Splitter: save initial size for collapsed panels on initialization #33059

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dmlvr merged 5 commits into from
Mar 30, 2026
Merged

Splitter: save initial size for collapsed panels on initialization #33059

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
25e0864
Splitter: save initial size for collapsed panels on initialization
EugeniyKiyashko Mar 26, 2026
f86b72e
add more tests + update cache in the runtime update
dmlvr Mar 27, 2026
556de49
update expected values
dmlvr Mar 27, 2026
0c1f50f
fix typos
dmlvr Mar 27, 2026
1988d3c
Update splitter.tests.js
EugeniyKiyashko Mar 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 52 additions & 8 deletions packages/devextreme/js/__internal/ui/splitter/splitter.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,13 +69,13 @@ import {
type RenderQueueItem,
} from './utils/types';

const SPLITTER_CLASS = 'dx-splitter';
const SPLITTER_ITEM_CLASS = 'dx-splitter-item';
const SPLITTER_ITEM_HIDDEN_CONTENT_CLASS = 'dx-splitter-item-hidden-content';
export const SPLITTER_CLASS = 'dx-splitter';
export const SPLITTER_ITEM_CLASS = 'dx-splitter-item';
export const SPLITTER_ITEM_HIDDEN_CONTENT_CLASS = 'dx-splitter-item-hidden-content';
export const INVISIBLE_STATE_CLASS = 'dx-state-invisible';
const SPLITTER_ITEM_DATA_KEY = 'dxSplitterItemData';
const HORIZONTAL_ORIENTATION_CLASS = 'dx-splitter-horizontal';
const VERTICAL_ORIENTATION_CLASS = 'dx-splitter-vertical';
const INVISIBLE_STATE_CLASS = 'dx-state-invisible';

const DEFAULT_RESIZE_HANDLE_SIZE = 8;

Expand Down Expand Up @@ -118,9 +118,11 @@ class Splitter extends CollectionWidgetLiveUpdate<Properties> {

private _renderQueue: RenderQueueItem[] = [];

private _panesCacheSize: (PaneCache | undefined)[] = [];
// @ts-expect-error ts-error
private _panesCacheSize: (PaneCache | undefined)[];

private _panesCacheSizeVisible: (PaneCache | undefined)[] = [];
// @ts-expect-error ts-error
private _panesCacheSizeVisible: (PaneCache | undefined)[];
Comment thread
EugeniyKiyashko marked this conversation as resolved.

private _savedCollapsingEvent?: DxEvent<InteractionEvent>;

Expand Down Expand Up @@ -201,11 +203,11 @@ class Splitter extends CollectionWidgetLiveUpdate<Properties> {

this._toggleOrientationClass();

super._initMarkup();

this._panesCacheSize = [];
this._panesCacheSizeVisible = [];

super._initMarkup();

this._attachResizeObserverSubscription();
}

Expand Down Expand Up @@ -240,6 +242,7 @@ class Splitter extends CollectionWidgetLiveUpdate<Properties> {
this._layout = this._getDefaultLayoutBasedOnSize();

this._applyStylesFromLayout(this._layout);
this._setPanesCacheSize();
this._updateItemSizes();

this._shouldRecalculateLayout = false;
Expand All @@ -255,6 +258,7 @@ class Splitter extends CollectionWidgetLiveUpdate<Properties> {
if (this._isVisible()) {
this._layout = this._getDefaultLayoutBasedOnSize();
this._applyStylesFromLayout(this._layout);
this._setPanesCacheSize();

this._updateItemSizes();
} else {
Expand All @@ -264,6 +268,45 @@ class Splitter extends CollectionWidgetLiveUpdate<Properties> {
this._processRenderQueue();
}

_setPanesCacheSize(): void {
const { items = [] } = this.option();

items.forEach((item: Item, index) => {
const restriction = this._itemRestrictions[index];

if (!isDefined(restriction?.size)) {
return;
}

if (item.collapsed === true) {
const isLastNonCollapsed = index >= findLastIndexOfNonCollapsedItem(items);
const isLastVisible = this._isLastVisibleItem(index);

const direction = isLastVisible || isLastNonCollapsed
? CollapseExpandDirection.Previous
: CollapseExpandDirection.Next;

this._panesCacheSize[index] = {
size: restriction.size,
direction,
};
}

if (item.visible === false) {
const isLastVisible = index >= findLastIndexOfVisibleItem(items);

const direction = isLastVisible
? CollapseExpandDirection.Previous
: CollapseExpandDirection.Next;

this._panesCacheSizeVisible[index] = {
size: restriction.size,
direction,
};
}
});
}

_processRenderQueue(): void {
if (this._isRenderQueueEmpty()) {
return;
Expand Down Expand Up @@ -665,6 +708,7 @@ class Splitter extends CollectionWidgetLiveUpdate<Properties> {
this._layout = this._getDefaultLayoutBasedOnSize(item);

this._applyStylesFromLayout(this.getLayout());
this._setPanesCacheSize();
this._updateItemSizes();
break;
case 'maxSize':
Expand Down
Loading
Loading