CollectionAsync: use unique string keys to index _asyncTemplateItems

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

Hide file tree

Showing 3 changed files with 10 additions and 11 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,3 +1,4 @@
+import Guid from '@js/core/guid';
 import { noop } from '@js/core/utils/common';
 import { Deferred, when } from '@js/core/utils/deferred';
 
@@ -17,9 +18,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._asyncTemplateItems[uniqueKey] = itemDeferred;
+    const $itemContent = this.callBase({ ...args, uniqueKey });
 
     itemDeferred.done(() => {
       renderContentDeferred.resolve($itemContent);
@@ -30,7 +32,7 @@ const AsyncCollectionWidget = CollectionWidgetEdit.inherit({
 
   _onItemTemplateRendered(itemTemplate, renderArgs) {
     return () => {
-      this._asyncTemplateItems[renderArgs.index]?.resolve();
+      this._asyncTemplateItems[renderArgs.uniqueKey]?.resolve();
     };
   },
 
@@ -40,7 +42,9 @@ const AsyncCollectionWidget = CollectionWidgetEdit.inherit({
     const d = Deferred();
     when.apply(this, this._asyncTemplateItems).done(() => {
       this._postProcessRenderItems(...args);
-      d.resolve();
+      d.resolve().then(() => {
+        this._asyncTemplateItems = [];
+      });
     });
     return d.promise();
   },

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;