Splitter: resizeEnd event should be fired after panes sizes update (T1240125)

packages/devextreme/js/__internal/ui/splitter/splitter.ts

@@ -524,20 +524,12 @@ class Splitter extends CollectionWidget<Properties> {
           event,
           handleElement: getPublicElement<HTMLElement>($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);
       },
     };
   }

packages/devextreme/js/ui/splitter.d.ts

@@ -117,7 +117,7 @@ export type ResizeStartEvent<TKey = any> = Cancelable & NativeEventInfo<dxSplitt
  * @type object
  * @inherits Cancelable,NativeEventInfo,_ui_splitter_ResizeInfo
  */
-export type ResizeEndEvent<TKey = any> = Cancelable & NativeEventInfo<dxSplitter<TKey>, KeyboardEvent | PointerEvent | MouseEvent | TouchEvent> & ResizeInfo;
+export type ResizeEndEvent<TKey = any> = NativeEventInfo<dxSplitter<TKey>, KeyboardEvent | PointerEvent | MouseEvent | TouchEvent> & ResizeInfo;
 
 /**
  * @docid _ui_splitter_ItemCollapsedEvent

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, () => {

packages/devextreme/ts/dx.all.d.ts

@@ -25611,11 +25611,10 @@ declare module DevExpress.ui {
     /**
      * [descr:_ui_splitter_ResizeEndEvent]
      */
-    export type ResizeEndEvent<TKey = any> = DevExpress.events.Cancelable &
-      DevExpress.events.NativeEventInfo<
-        dxSplitter<TKey>,
-        KeyboardEvent | PointerEvent | MouseEvent | TouchEvent
-      > &
+    export type ResizeEndEvent<TKey = any> = DevExpress.events.NativeEventInfo<
+      dxSplitter<TKey>,
+      KeyboardEvent | PointerEvent | MouseEvent | TouchEvent
+    > &
       ResizeInfo;
     /**
      * [descr:_ui_splitter_ResizeEvent]