DateBox: Update time list items when value is changed while popup is closed (T1325614) (#33153)

Co-authored-by: marker dao ® <youdontknow@marker-dao.eth>

Author: marker-dao

packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.list.ts

@@ -72,10 +72,12 @@ class ListStrategy extends DateBoxStrategy {
 
     if (selectedIndex === -1) {
       const { value } = this.dateBox.option();
+
       return value as Date;
     }
 
     const itemData = this._widgetItems[selectedIndex];
+
     return this._getDateByItemData(itemData);
   }
 
@@ -103,12 +105,12 @@ class ListStrategy extends DateBoxStrategy {
   _getWidgetOptions(): Record<string, unknown> {
     return {
       itemTemplate: this._timeListItemTemplate.bind(this),
-      onItemClick: this._listItemClickHandler.bind(this),
+      selectionMode: 'single',
       tabIndex: -1,
+      onItemClick: this._listItemClickHandler.bind(this),
       onFocusedItemChanged: (
         e: DxEvent & { actionValue: string },
       ) => this._refreshActiveDescendant(e),
-      selectionMode: 'single',
     };
   }
 
@@ -128,9 +130,10 @@ class ListStrategy extends DateBoxStrategy {
     }
 
     this._widget.option('focusedElement', null);
-
     this._setSelectedItemsByValue();
+
     const { templatesRenderAsynchronously } = this.getWidget().option();
+
     if (templatesRenderAsynchronously) {
       // eslint-disable-next-line no-restricted-globals
       this._asyncScrollTimeout = setTimeout(this._scrollToSelectedItem.bind(this));
@@ -141,18 +144,27 @@ class ListStrategy extends DateBoxStrategy {
 
   dispose(): void {
     super.dispose();
+
     clearTimeout(this._asyncScrollTimeout);
   }
 
+  renderValue(): void {
+    this._updateValue();
+  }
+
   _updateValue(): void {
     if (!this._widget) {
       return;
     }
 
     this._refreshItems();
 
-    this._setSelectedItemsByValue();
-    this._scrollToSelectedItem();
+    const { opened } = this.dateBox.option();
+
+    if (opened) {
+      this._setSelectedItemsByValue();
+      this._scrollToSelectedItem();
+    }
   }
 
   _setSelectedItemsByValue(): void {
@@ -192,10 +204,13 @@ class ListStrategy extends DateBoxStrategy {
 
   _getTimeListItems(): Date[] {
     let min = this.dateBox.getDateOption('min') ?? this._getBoundaryDate('min');
+
     const max = this.dateBox.getDateOption('max') ?? this._getBoundaryDate('max');
     const value = this.dateBox.getDateOption('value') ?? null;
+
     // @ts-expect-error ts-error
     let delta = max - min;
+
     const { interval = 30 } = this.dateBox.option();
     const minutes = min.getMinutes() % interval;
 
@@ -206,6 +221,7 @@ class ListStrategy extends DateBoxStrategy {
     if (delta > dateUtils.ONE_DAY) {
       delta = dateUtils.ONE_DAY;
     }
+
     // @ts-expect-error ts-error
     if (value - min < dateUtils.ONE_DAY) {
       return this._getRangeItems(min, new Date(min), delta);
@@ -237,7 +253,11 @@ class ListStrategy extends DateBoxStrategy {
 
   _getBoundaryDate(boundary: 'min' | 'max'): Date {
     const boundaryValue = BOUNDARY_VALUES[boundary];
-    const currentValue = new Date(ensureDefined(this.dateBox.getDateOption('value'), new Date(0)));
+    const dateBoxDate = this.dateBox.getDateOption('value');
+    const newDate = new Date(0);
+    const definedValue = ensureDefined(dateBoxDate, newDate);
+
+    const currentValue = new Date(definedValue);
 
     return new Date(
       currentValue.getFullYear(),
@@ -267,6 +287,7 @@ class ListStrategy extends DateBoxStrategy {
 
   _getDateByItemData(itemData: Date): Date {
     let { value: date } = this.dateBox.option();
+
     const hours = itemData.getHours();
     const minutes = itemData.getMinutes();
     const seconds = itemData.getSeconds();
@@ -276,6 +297,7 @@ class ListStrategy extends DateBoxStrategy {
 
     if (date) {
       const { dateSerializationFormat } = this.dateBox.option();
+
       if (dateSerializationFormat) {
         date = dateSerialization.deserializeDate(date) as Date;
       } else {
@@ -301,10 +323,13 @@ class ListStrategy extends DateBoxStrategy {
 
   _updatePopupHeight(): void {
     const dropDownOptionsHeight = getSizeValue(this.dateBox.option('dropDownOptions.height'));
+
     if (dropDownOptionsHeight === undefined || dropDownOptionsHeight === 'auto') {
       this.dateBox._setPopupOption('height', 'auto');
+
       const popupHeight = getOuterHeight(this.getWidget().$element());
       const maxHeight = getHeight(window) * 0.45;
+
       this.dateBox._setPopupOption('height', Math.min(popupHeight, maxHeight));
     }
   }

packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/datebox.integration.tests.js

@@ -2205,6 +2205,51 @@ QUnit.module('datebox w/ time list', {
         assert.deepEqual(this.dateBox.option('value'), new Date(2020, 4, 13, 1, 30), 'date is correct');
     });
 
+    QUnit.test('time selection should use updated date after external value change while popup is closed (T1325614)', function(assert) {
+        this.dateBox.option({
+            type: 'time',
+            pickerType: 'list',
+            value: new Date(1995, 11, 25, 12, 0),
+            opened: true
+        });
+
+        const $list = $(this.dateBox.content()).find(LIST_ITEM_SELECTOR);
+
+        $($list.eq(3)).trigger('dxclick');
+
+        this.dateBox.option('value', new Date(1995, 11, 12, 12, 0));
+        this.dateBox.open();
+
+        const $updatedList = $(this.dateBox.content()).find(LIST_ITEM_SELECTOR);
+
+        $($updatedList.eq(5)).trigger('dxclick');
+
+        const result = this.dateBox.option('value');
+
+        assert.strictEqual(result.getDate(), 12, 'date part is preserved after time selection');
+        assert.strictEqual(result.getMonth(), 11, 'month part is preserved after time selection');
+        assert.strictEqual(result.getFullYear(), 1995, 'year part is preserved after time selection');
+    });
+
+    QUnit.test('list items should be refreshed after value is changed while popup is closed (T1325614)', function(assert) {
+        this.dateBox.option({
+            type: 'time',
+            pickerType: 'list',
+            value: new Date(2020, 4, 13, 10, 0),
+            opened: true
+        });
+
+        this.dateBox.option('opened', false);
+        this.dateBox.option('value', new Date(2020, 8, 20, 10, 0));
+        this.dateBox.option('opened', true);
+
+        const itemData = this.dateBox._strategy._widgetItems[0];
+
+        assert.strictEqual(itemData.getFullYear(), 2020, 'item year is updated');
+        assert.strictEqual(itemData.getMonth(), 8, 'item month is updated');
+        assert.strictEqual(itemData.getDate(), 20, 'item day is updated');
+    });
+
     QUnit.test('the date should be in range after the selection', function(assert) {
         this.dateBox.option({
             type: 'time',
@@ -2498,12 +2543,13 @@ QUnit.module('datebox w/ time list', {
             dateSerializationFormat: 'yyyy-MM-ddTHH:mm:ssx',
         });
         const $input = $(this.dateBox.element()).find(`.${TEXTEDITOR_INPUT_CLASS}`);
-        const $items = $(this.dateBox.content()).find(LIST_ITEM_SELECTOR);
+        let $items = $(this.dateBox.content()).find(LIST_ITEM_SELECTOR);
 
         $items.eq(1).trigger('dxclick');
         assert.strictEqual($input.val(), $items.eq(1).text(), 'time is applied');
 
         this.dateBox.open();
+        $items = $(this.dateBox.content()).find(LIST_ITEM_SELECTOR);
         $items.eq(3).trigger('dxclick');
         assert.strictEqual($input.val(), $items.eq(3).text(), 'new time is applied');
     });