CollectionAsync: use unique string keys to index _asyncTemplateItems

DevExpress · Dec 25, 2024 · d1350e1 · d1350e1
1 parent 6857043
commit d1350e1
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 16 deletions.
diff --git a/apps/demos/testing/common.test.js b/apps/demos/testing/common.test.js
@@ -133,9 +133,6 @@ const SKIPPED_TESTS = {
     ],
   },
   React: {
-    Common: [
-      { demo: 'ActionAndListsOverview', themes: [THEME.generic, THEME.material] },
-    ],
     Charts: [
       { demo: 'PiesWithEqualSize', themes: [THEME.material] },
       { demo: 'CustomAnnotations', themes: [THEME.material] },
@@ -182,9 +179,6 @@ const SKIPPED_TESTS = {
     ],
   },
   Vue: {
-    Common: [
-      { demo: 'ActionAndListsOverview', themes: [THEME.generic, THEME.material] },
-    ],
     Charts: [
       { demo: 'TilingAlgorithms', themes: [THEME.material] },
       { demo: 'ExportAndPrintingAPI', themes: [THEME.material] },

diff --git a/packages/devextreme/js/__internal/ui/collection/m_collection_widget.async.ts b/packages/devextreme/js/__internal/ui/collection/m_collection_widget.async.ts
@@ -1,11 +1,13 @@
+import Guid from '@js/core/guid';
 import { noop } from '@js/core/utils/common';
+import type { DeferredObj } from '@js/core/utils/deferred';
 import { Deferred, when } from '@js/core/utils/deferred';
 
 import CollectionWidgetEdit from './m_collection_widget.edit';
 
 const AsyncCollectionWidget = CollectionWidgetEdit.inherit({
   _initMarkup() {
-    this._asyncTemplateItems = [];
+    this._asyncTemplateItemsMap = {};
     this.callBase();
   },
 
@@ -17,9 +19,10 @@ const AsyncCollectionWidget = CollectionWidgetEdit.inherit({
   _renderItemContent(args) {
     const renderContentDeferred = Deferred();
     const itemDeferred = Deferred();
+    const uniqueKey = `dx${new Guid()}`;
 
-    this._asyncTemplateItems[args.index] = itemDeferred;
-    const $itemContent = this.callBase(args);
+    this._asyncTemplateItemsMap[uniqueKey] = itemDeferred;
+    const $itemContent = this.callBase({ ...args, uniqueKey });
 
     itemDeferred.done(() => {
       renderContentDeferred.resolve($itemContent);
@@ -30,27 +33,37 @@ const AsyncCollectionWidget = CollectionWidgetEdit.inherit({
 
   _onItemTemplateRendered(itemTemplate, renderArgs) {
     return () => {
-      this._asyncTemplateItems[renderArgs.index]?.resolve();
+      this._asyncTemplateItemsMap[renderArgs.uniqueKey]?.resolve();
     };
   },
 
   _postProcessRenderItems: noop,
 
   _planPostRenderActions(...args: unknown[]) {
     const d = Deferred();
-    when.apply(this, this._asyncTemplateItems).done(() => {
+    const asyncTemplateItems = Object.values<DeferredObj<unknown>>(this._asyncTemplateItemsMap);
+
+    when.apply(this, asyncTemplateItems).done(() => {
       this._postProcessRenderItems(...args);
-      d.resolve();
+
+      d.resolve().then(() => {
+        this._asyncTemplateItemsMap = {};
+      });
     });
+
     return d.promise();
   },
 
   _clean() {
     this.callBase();
-    this._asyncTemplateItems.forEach((item) => {
+
+    const asyncTemplateItems = Object.values<DeferredObj<unknown>>(this._asyncTemplateItemsMap);
+
+    asyncTemplateItems.forEach((item) => {
       item.reject();
     });
-    this._asyncTemplateItems = [];
+
+    this._asyncTemplateItemsMap = {};
   },
 });
 

diff --git a/packages/devextreme/js/__internal/ui/collection/m_collection_widget.base.ts b/packages/devextreme/js/__internal/ui/collection/m_collection_widget.base.ts
@@ -876,7 +876,7 @@ const CollectionWidget = Widget.inherit({
     $element.attr(attributes);
   },
 
-  _renderItem(index, itemData, $container, $itemToReplace) {
+  _renderItem(index, itemData, $container, $itemToReplace, ...args) {
     const itemIndex = index?.item ?? index;
     $container = $container || this._getItemsContainer();
     const $itemFrame = this._renderItemFrame(itemIndex, itemData, $container, $itemToReplace);
@@ -891,6 +891,7 @@ const CollectionWidget = Widget.inherit({
       container: getPublicElement($itemContent),
       contentClass: this._itemContentClass(),
       defaultTemplateName: this.option('itemTemplate'),
+      ...args,
     });
 
     const that = this;

diff --git a/packages/devextreme/js/__internal/ui/tree_view/m_tree_view.base.ts b/packages/devextreme/js/__internal/ui/tree_view/m_tree_view.base.ts
@@ -1441,7 +1441,7 @@ const TreeViewBase = (HierarchicalCollectionWidget as any).inherit({
 
     if (this._showCheckboxes()) {
       const parentValue = parentNode.internalFields.selected;
-      this._getCheckBoxInstance($parentNode).option('value', parentValue);
+      this._getCheckBoxInstance($parentNode)?.option('value', parentValue);
       this._toggleSelectedClass($parentNode, parentValue);
     }