Splitter: resizeHandle should not be duplicated when changing the template option at runtime (T1279224) (DevExpress#29467)

Author: EugeniyKiyashko

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

@@ -545,6 +545,7 @@ class Splitter extends CollectionWidget<Properties> {
           event,
           handleElement: getPublicElement<HTMLElement>($resizeHandle),
         };
+
         // eslint-disable-next-line @typescript-eslint/no-floating-promises
         this._feedbackDeferred?.resolve();
         this._toggleActiveState($resizeHandle, false);
@@ -683,6 +684,12 @@ class Splitter extends CollectionWidget<Properties> {
         this._itemVisibleOptionChanged(item, value as PropertyType, prevValue as PropertyType);
         break;
       }
+      case 'template':
+        super._itemOptionChanged(item, property, value, prevValue);
+
+        this._applyStylesFromLayout(this.getLayout());
+        this._updateResizeHandles();
+        break;
       default:
         super._itemOptionChanged(item, property, value, prevValue);
     }

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

@@ -82,6 +82,12 @@ class SplitterItem extends CollectionWidgetItem {
   isLast(): boolean {
     return this._owner._isLastVisibleItem(this.getIndex());
   }
+
+  _dispose(): void {
+    this._removeResizeHandle();
+    // @ts-expect-error ts-error
+    super._dispose();
+  }
 }
 
 export default SplitterItem;

packages/devextreme/testing/tests/DevExpress.ui.widgets/splitter.tests.js

@@ -1605,6 +1605,47 @@ QUnit.module('Pane visibility', moduleConfig, () => {
     });
 });
 
+QUnit.module('Pane.template', moduleConfig, () => {
+    QUnit.test('ResizeHandle should not be duplicated when changing the template option at runtime (T1279224)', function(assert) {
+        const firstPaneTemplate = () => $('<div>').text('Pane 1');
+        const secondPaneTemplate = () => $('<div>').text('Pane 2');
+
+        this.reinit({
+            dataSource: [{
+                template: firstPaneTemplate
+            }, {
+                template: secondPaneTemplate
+            }]
+        });
+
+        this.instance.option({
+            'items[0].template': secondPaneTemplate,
+            'items[1].template': firstPaneTemplate,
+        });
+
+        assert.strictEqual(this.getResizeHandles().length, 1);
+    });
+
+    QUnit.test('Layout should restore the distribution when changing the template option at runtime (T1279224)', function(assert) {
+        const firstPaneTemplate = () => $('<div>').text('Pane 1');
+        const secondPaneTemplate = () => $('<div>').text('Pane 2');
+
+        this.reinit({
+            dataSource: [{
+                size: '300px',
+                template: firstPaneTemplate
+            }, {
+                template: secondPaneTemplate
+            }]
+        });
+
+        this.instance.option('items[0].template', secondPaneTemplate);
+
+        this.checkItemSizes([300, 692]);
+        this.assertLayout(['30.2419', '69.7581']);
+    });
+});
+
 QUnit.module('Resizing', moduleConfig, () => {
     ['horizontal', 'vertical'].forEach(orientation => {
         QUnit.test(`collapsed pane should move its neighboring pane on expansion to left, orientation ${orientation}`, function(assert) {
@@ -2929,6 +2970,24 @@ QUnit.module('Visibility of control elements', {
             });
         });
     });
+
+    QUnit.test('ResizeHandle control elements visibility should be updated when changing the template option at runtime (T1279224)', function(assert) {
+        const firstPaneTemplate = () => $('<div>').text('Pane 1');
+        const secondPaneTemplate = () => $('<div>').text('Pane 2');
+
+        this.reinit({
+            dataSource: [{
+                template: firstPaneTemplate
+            }, {
+                template: secondPaneTemplate,
+                collapsible: true,
+            }]
+        });
+
+        this.instance.option('items[0].template', secondPaneTemplate);
+
+        this.checkIconsVisibility([{ prev: false, resize: true, next: true }]);
+    });
 });
 
 QUnit.module('Events', moduleConfig, () => {