diff --git a/packages/devextreme/js/__internal/ui/splitter/splitter.ts b/packages/devextreme/js/__internal/ui/splitter/splitter.ts index 72ee6c94bc28..b5af15aac563 100644 --- a/packages/devextreme/js/__internal/ui/splitter/splitter.ts +++ b/packages/devextreme/js/__internal/ui/splitter/splitter.ts @@ -524,20 +524,12 @@ class Splitter extends CollectionWidget { event, handleElement: getPublicElement($resizeHandle), }; - - this._getAction(RESIZE_EVENT.onResizeEnd)(eventArgs); - - if (eventArgs.cancel) { - // @ts-expect-error ts-error - event.cancel = true; - return; - } - // eslint-disable-next-line @typescript-eslint/no-floating-promises this._feedbackDeferred?.resolve(); this._toggleActiveState($resizeHandle, false); this._updateItemSizes(); + this._getAction(RESIZE_EVENT.onResizeEnd)(eventArgs); }, }; } diff --git a/packages/devextreme/js/ui/splitter.d.ts b/packages/devextreme/js/ui/splitter.d.ts index 1d3365f46fec..4a2a665b2eae 100644 --- a/packages/devextreme/js/ui/splitter.d.ts +++ b/packages/devextreme/js/ui/splitter.d.ts @@ -117,7 +117,7 @@ export type ResizeStartEvent = Cancelable & NativeEventInfo = Cancelable & NativeEventInfo, KeyboardEvent | PointerEvent | MouseEvent | TouchEvent> & ResizeInfo; +export type ResizeEndEvent = NativeEventInfo, KeyboardEvent | PointerEvent | MouseEvent | TouchEvent> & ResizeInfo; /** * @docid _ui_splitter_ItemCollapsedEvent diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/splitter.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/splitter.tests.js index ee689ef95ebc..957699185852 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/splitter.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/splitter.tests.js @@ -2537,6 +2537,22 @@ QUnit.module('Visibility of control elements', { }); QUnit.module('Events', moduleConfig, () => { + QUnit.test('items sizes should be already updated when onResizeEnd is raised (T1240125)', function(assert) { + assert.expect(1); + + this.reinit({ + onResizeEnd: (eventArgs) => { + const newItems = eventArgs.component.option('items'); + assert.strictEqual(newItems[0].size, firstPaneInitialSize + delta, 'Size of the first item should be updated'); + }, + dataSource: [{ text: 'Pane_1' }, { text: 'Pane_2' }] + }); + const firstPaneInitialSize = this.instance.option('items')[0].size; + const delta = 90; + const pointer = pointerMock(this.getResizeHandles(false).eq(0)); + pointer.start().dragStart().drag(delta, 0).dragEnd(); + }); + ['onResizeStart', 'onResize', 'onResizeEnd'].forEach(eventHandler => { QUnit.test(`${eventHandler} should be called when handle dragged`, function(assert) { const resizeHandlerStub = sinon.stub(); @@ -2948,29 +2964,6 @@ QUnit.module('Events', moduleConfig, () => { this.assertLayout([50, 50]); assert.true(resizeEvent.event.cancel); }); - - QUnit.test('onResizeEnd event should be cancellable', function(assert) { - let resizeEvent; - this.reinit({ - width: 408, - height: 408, - dataSource: [{ size: '200px' }, { size: '200px' }], - onResizeEnd: function(e) { - resizeEvent = e; - e.cancel = true; - }, - }); - - const pointer = pointerMock(this.getResizeHandles().eq(0)); - pointer.start().dragStart().drag(100, 100).dragEnd(); - - const firstPaneSize = this.instance.option('items[0].size'); - const secondPaneSize = this.instance.option('items[1].size'); - - assert.strictEqual(firstPaneSize, 200); - assert.strictEqual(secondPaneSize, 200); - assert.true(resizeEvent.event.cancel); - }); }); QUnit.module('Nested Splitters', moduleConfig, () => { diff --git a/packages/devextreme/ts/dx.all.d.ts b/packages/devextreme/ts/dx.all.d.ts index e422e919d6c4..72379409191d 100644 --- a/packages/devextreme/ts/dx.all.d.ts +++ b/packages/devextreme/ts/dx.all.d.ts @@ -25611,11 +25611,10 @@ declare module DevExpress.ui { /** * [descr:_ui_splitter_ResizeEndEvent] */ - export type ResizeEndEvent = DevExpress.events.Cancelable & - DevExpress.events.NativeEventInfo< - dxSplitter, - KeyboardEvent | PointerEvent | MouseEvent | TouchEvent - > & + export type ResizeEndEvent = DevExpress.events.NativeEventInfo< + dxSplitter, + KeyboardEvent | PointerEvent | MouseEvent | TouchEvent + > & ResizeInfo; /** * [descr:_ui_splitter_ResizeEvent]