Stepper: update connector properties on repaint (T1312793) (#31620)

Author: pharret31

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

@@ -17,15 +17,15 @@ import type {
   ItemRenderInfo,
   PostprocessRenderItemInfo,
 } from '@ts/ui/collection/collection_widget.base';
+import type { CollectionWidgetEditProperties } from '@ts/ui/collection/collection_widget.edit';
+import type { ConnectorProperties } from '@ts/ui/stepper/connector';
 import Connector from '@ts/ui/stepper/connector';
 import StepperItem, {
   STEP_COMPLETED_CLASS,
   STEP_INVALID_ICON,
   STEP_VALID_ICON,
 } from '@ts/ui/stepper/stepper_item';
 
-import type { CollectionWidgetEditProperties } from '../collection/collection_widget.edit';
-
 export const STEPPER_CLASS = 'dx-stepper';
 export const STEP_LIST_CLASS = 'dx-step-list';
 export const STEP_CLASS = 'dx-step';
@@ -260,18 +260,26 @@ class Stepper extends CollectionWidgetAsync<StepperProperties> {
     super._initMarkup();
   }
 
-  _renderConnector(): void {
-    if (this._connector) {
-      return;
-    }
-
+  _getConnectorOptions(): ConnectorProperties {
     const { orientation } = this.option();
 
-    this._connector = this._createComponent($('<div>'), Connector, {
+    return {
       orientation,
       size: this._getConnectorSize(),
       value: this._getConnectorValue(),
-    });
+    };
+  }
+
+  _renderConnector(): void {
+    if (this._connector) {
+      return;
+    }
+
+    this._connector = this._createComponent(
+      $('<div>'),
+      Connector,
+      this._getConnectorOptions(),
+    );
 
     $(this.element())
       .prepend(this._connector.$element());
@@ -445,6 +453,10 @@ class Stepper extends CollectionWidgetAsync<StepperProperties> {
       case 'hintExpr':
         this._invalidate();
         break;
+      case 'items':
+        super._optionChanged(args);
+        this._connector.option(this._getConnectorOptions());
+        break;
       default:
         super._optionChanged(args);
     }

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

@@ -97,7 +97,7 @@ QUnit.module('Navigation', moduleConfig, () => {
                 items: [{}, {}, {}, {}],
                 selectedIndex: 1,
                 linear,
-                onSelectionChanged: function(e) {
+                onSelectionChanged: function() {
                     count += 1;
                 },
             });
@@ -310,6 +310,23 @@ QUnit.module('Connector integration', moduleConfig, () => {
             assert.deepEqual(this.getConnector().$element().children().length, 1, 'content is not duplicated');
         });
     });
+
+    QUnit.test('connector should update its size on items mutation (T1312793)', function(assert) {
+        const items = [{}, {}];
+
+        this.reinit({ items, width: 100 });
+
+        const sizeBefore = this.getConnector().option('size');
+
+        assert.roughEqual(sizeBefore, 50, 0.01, 'initial connector size is correct');
+
+        items.push({}, {});
+        this.instance.option('items', items);
+
+        const sizeAfter = this.getConnector().option('size');
+
+        assert.roughEqual(sizeAfter, 75, 0.01, 'connector size is correct after items mutation');
+    });
 });
 
 QUnit.module('Focus', moduleConfig, () => {