fix: Row Detail open/close multiple times should always re-render (#499)

Author: ghiscoding

src/slickgrid-react/extensions/slickRowDetailView.ts

@@ -139,11 +139,14 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
             this._preloadRoot?.unmount();
 
             // triggers after backend called "onAsyncResponse.notify()"
-            this.renderViewModel(args?.item);
-
-            if (typeof this.rowDetailViewOptions?.onAsyncEndUpdate === 'function') {
-              this.rowDetailViewOptions.onAsyncEndUpdate(event, args);
-            }
+            // because of the preload destroy above, we need a small delay to make sure the DOM element is ready to render the Row Detail
+            queueMicrotask(() => {
+              this.renderViewModel(args?.item);
+
+              if (typeof this.rowDetailViewOptions?.onAsyncEndUpdate === 'function') {
+                this.rowDetailViewOptions.onAsyncEndUpdate(event, args);
+              }
+            });
           });
 
           this._eventHandler.subscribe(this.onAfterRowDetailToggle, async (event, args) => {

test/cypress/e2e/example19.cy.ts

@@ -346,4 +346,21 @@ describe('Example 19 - Row Detail View', () => {
       .find('.slick-cell + .dynamic-cell-detail .innerDetailView_101')
       .should('not.exist');
   });
+
+  it('should expect the Row Detail to be re-rendered after expanding/collapsing multiple times', () => {
+    cy.get('#grid19').find('.slick-row:nth(1) .slick-cell:nth(0)').as('toggle1');
+    cy.get('@toggle1').click();
+    cy.get('@toggle1').click();
+    cy.get('@toggle1').click();
+
+    cy.get('#grid19').find('.slick-cell + .dynamic-cell-detail .innerDetailView_1').as('detailContainer');
+    cy.get('@detailContainer').find('h3').contains('Task 1');
+
+    cy.get('@toggle1').click();
+    cy.get('@detailContainer').should('not.exist');
+
+    cy.get('@toggle1').click();
+    cy.get('#grid19').find('.slick-cell + .dynamic-cell-detail .innerDetailView_1').as('detailContainer');
+    cy.get('@detailContainer').find('h3').contains('Task 1');
+  });
 });