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

ghiscoding · web-flow · commit 8b1437cab5c1 · 2025-05-07T20:49:41.000-04:00
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
@@ -10,7 +10,7 @@
     {
       "label": "Run Angular Unit Tests (watch)",
       "type": "shell",
-      "command": "pnpm angular:test:watch",
+      "command": "pnpm angular:test",
       "problemMatcher": []
     },
     {
@@ -22,7 +22,7 @@
     {
       "label": "Run Vanilla Unit Tests (watch)",
       "type": "shell",
-      "command": "pnpm test:watch",
+      "command": "pnpm test",
       "problemMatcher": []
     },
     {
diff --git a/README.md b/README.md
@@ -163,9 +163,6 @@ You must go through Installation Steps 1-3 prior to running the Vitest unit test
 To run all unit tests (with Vitest), you can run one of the following commands (make sure that steps 1-3 were executed prior to running this command)
 ```bash
 pnpm run test
-
-# or run Vitest in watch mode
-pnpm run test:watch
 ```
 
 #### Cypress E2E Tests
diff --git a/demos/aurelia/test/cypress/e2e/example19.cy.ts b/demos/aurelia/test/cypress/e2e/example19.cy.ts
@@ -243,4 +243,21 @@ describe('Example 19 - Row Detail View', () => {
 
     cy.get('#grid19').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');
+  });
 });
diff --git a/demos/react/test/cypress/e2e/example19.cy.ts b/demos/react/test/cypress/e2e/example19.cy.ts
@@ -243,4 +243,21 @@ describe('Example 19 - Row Detail View', () => {
 
     cy.get('#grid19').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');
+  });
 });
diff --git a/demos/vue/test/cypress/e2e/example19.cy.ts b/demos/vue/test/cypress/e2e/example19.cy.ts
@@ -243,4 +243,21 @@ describe('Example 19 - Row Detail View', () => {
 
     cy.get('#grid19').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');
+  });
 });
diff --git a/frameworks/angular-slickgrid/package.json b/frameworks/angular-slickgrid/package.json
@@ -35,8 +35,7 @@
     "lint:fix": "eslint --fix .",
     "pack-tarball": "npm pack",
     "pack-lib": "npm pack ./dist",
-    "test": "ng test",
-    "test:watch": "ng test --watch",
+    "test": "ng test --watch",
     "test:coverage": "vitest --no-watch --coverage"
   },
   "publishConfig": {
diff --git a/frameworks/angular-slickgrid/src/library/extensions/__tests__/slickRowDetailView.spec.ts b/frameworks/angular-slickgrid/src/library/extensions/__tests__/slickRowDetailView.spec.ts
@@ -262,35 +262,39 @@ describe('SlickRowDetailView', () => {
         expect(onRowBackViewSpy).not.toHaveBeenCalled();
       });
 
-      it('should call internal event handler subscribe and expect the "onAsyncEndUpdate" option to be called when addon notify is called', () => {
-        // const handlerSpy = vi.spyOn(plugin.eventHandler, 'subscribe');
-        const renderSpy = vi.spyOn(plugin, 'renderViewModel');
+      it('should call internal event handler subscribe and expect the "onAsyncEndUpdate" option to be called when addon notify is called', () =>
+        new Promise((done: any) => {
+          // const handlerSpy = vi.spyOn(plugin.eventHandler, 'subscribe');
+          const renderSpy = vi.spyOn(plugin, 'renderViewModel');
 
-        const onAsyncRespSpy = vi.spyOn(gridOptionsMock.rowDetailView as RowDetailView, 'onAsyncResponse');
-        const onAsyncEndSpy = vi.spyOn(gridOptionsMock.rowDetailView as RowDetailView, 'onAsyncEndUpdate');
-        const onAfterRowSpy = vi.spyOn(gridOptionsMock.rowDetailView as RowDetailView, 'onAfterRowDetailToggle');
-        const onBeforeRowSpy = vi.spyOn(gridOptionsMock.rowDetailView as RowDetailView, 'onBeforeRowDetailToggle');
-        const onRowOutViewSpy = vi.spyOn(gridOptionsMock.rowDetailView as RowDetailView, 'onRowOutOfViewportRange');
-        const onRowBackViewSpy = vi.spyOn(gridOptionsMock.rowDetailView as RowDetailView, 'onRowBackToViewportRange');
+          const onAsyncRespSpy = vi.spyOn(gridOptionsMock.rowDetailView as RowDetailView, 'onAsyncResponse');
+          const onAsyncEndSpy = vi.spyOn(gridOptionsMock.rowDetailView as RowDetailView, 'onAsyncEndUpdate');
+          const onAfterRowSpy = vi.spyOn(gridOptionsMock.rowDetailView as RowDetailView, 'onAfterRowDetailToggle');
+          const onBeforeRowSpy = vi.spyOn(gridOptionsMock.rowDetailView as RowDetailView, 'onBeforeRowDetailToggle');
+          const onRowOutViewSpy = vi.spyOn(gridOptionsMock.rowDetailView as RowDetailView, 'onRowOutOfViewportRange');
+          const onRowBackViewSpy = vi.spyOn(gridOptionsMock.rowDetailView as RowDetailView, 'onRowBackToViewportRange');
 
-        plugin.init(gridStub);
-        plugin.onAsyncEndUpdate = new SlickEvent();
-        plugin.register();
-        plugin.onAsyncEndUpdate.notify({ item: columnsMock[0], grid: gridStub }, new SlickEventData(), gridStub);
+          plugin.init(gridStub);
+          plugin.onAsyncEndUpdate = new SlickEvent();
+          plugin.register();
+          plugin.onAsyncEndUpdate.notify({ item: columnsMock[0], grid: gridStub }, new SlickEventData(), gridStub);
 
-        // expect(handlerSpy).toHaveBeenCalledTimes(8); // there are an extra 2x on the grid itself
-        // expect(handlerSpy).toHaveBeenCalledWith(
-        //   { notify: expect.anything(), subscribe: expect.anything(), unsubscribe: expect.anything(), },
-        //   expect.anything()
-        // );
-        expect(onAsyncRespSpy).not.toHaveBeenCalled();
-        expect(onAsyncEndSpy).toHaveBeenCalledWith(expect.anything(), { item: columnsMock[0], grid: gridStub });
-        expect(renderSpy).toHaveBeenCalledWith({ cssClass: 'red', field: 'field1', id: 'field1', width: 100 });
-        expect(onAfterRowSpy).not.toHaveBeenCalled();
-        expect(onBeforeRowSpy).not.toHaveBeenCalled();
-        expect(onRowOutViewSpy).not.toHaveBeenCalled();
-        expect(onRowBackViewSpy).not.toHaveBeenCalled();
-      });
+          // expect(handlerSpy).toHaveBeenCalledTimes(8); // there are an extra 2x on the grid itself
+          // expect(handlerSpy).toHaveBeenCalledWith(
+          //   { notify: expect.anything(), subscribe: expect.anything(), unsubscribe: expect.anything(), },
+          //   expect.anything()
+          // );
+          setTimeout(() => {
+            expect(onAsyncRespSpy).not.toHaveBeenCalled();
+            expect(onAsyncEndSpy).toHaveBeenCalledWith(expect.anything(), { item: columnsMock[0], grid: gridStub });
+            expect(renderSpy).toHaveBeenCalledWith({ cssClass: 'red', field: 'field1', id: 'field1', width: 100 });
+            expect(onAfterRowSpy).not.toHaveBeenCalled();
+            expect(onBeforeRowSpy).not.toHaveBeenCalled();
+            expect(onRowOutViewSpy).not.toHaveBeenCalled();
+            expect(onRowBackViewSpy).not.toHaveBeenCalled();
+            done();
+          });
+        }));
 
       it('should call internal event handler subscribe and expect the "onAfterRowDetailToggle" option to be called when addon notify is called', () => {
         // const handlerSpy = vi.spyOn(plugin.eventHandler, 'subscribe');
diff --git a/frameworks/angular-slickgrid/src/library/extensions/slickRowDetailView.ts b/frameworks/angular-slickgrid/src/library/extensions/slickRowDetailView.ts
@@ -149,11 +149,14 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
           this._preloadCompRef?.destroy();
 
           // triggers after backend called "onAsyncResponse.notify()"
-          this.renderViewModel(args?.item);
+          // 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 (this.rowDetailViewOptions && typeof this.rowDetailViewOptions.onAsyncEndUpdate === 'function') {
-            this.rowDetailViewOptions.onAsyncEndUpdate(e, args);
-          }
+            if (this.rowDetailViewOptions && typeof this.rowDetailViewOptions.onAsyncEndUpdate === 'function') {
+              this.rowDetailViewOptions.onAsyncEndUpdate(e, args);
+            }
+          });
         });
 
         this.eventHandler.subscribe(
diff --git a/frameworks/angular-slickgrid/test/cypress/e2e/example19.cy.ts b/frameworks/angular-slickgrid/test/cypress/e2e/example19.cy.ts
@@ -243,4 +243,21 @@ describe('Example 19 - Row Detail View', () => {
 
     cy.get('#grid19').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');
+  });
 });
diff --git a/frameworks/aurelia-slickgrid/src/extensions/slickRowDetailView.ts b/frameworks/aurelia-slickgrid/src/extensions/slickRowDetailView.ts
@@ -137,11 +137,14 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
             this._preloadController?.dispose();
 
             // triggers after backend called "onAsyncResponse.notify()"
-            await 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(async () => {
+              await this.renderViewModel(args?.item);
+
+              if (typeof this.rowDetailViewOptions?.onAsyncEndUpdate === 'function') {
+                this.rowDetailViewOptions.onAsyncEndUpdate(event, args);
+              }
+            });
           });
 
           this._eventHandler.subscribe(this.onAfterRowDetailToggle, async (event, args) => {
diff --git a/frameworks/slickgrid-react/src/extensions/slickRowDetailView.ts b/frameworks/slickgrid-react/src/extensions/slickRowDetailView.ts
@@ -137,11 +137,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) => {
diff --git a/frameworks/slickgrid-vue/src/extensions/slickRowDetailView.ts b/frameworks/slickgrid-vue/src/extensions/slickRowDetailView.ts
@@ -145,11 +145,14 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
             this._preloadApp?.unmount();
 
             // triggers after backend called "onAsyncResponse.notify()"
-            await 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(async () => {
+              await this.renderViewModel(args?.item);
+
+              if (typeof this.rowDetailViewOptions?.onAsyncEndUpdate === 'function') {
+                this.rowDetailViewOptions.onAsyncEndUpdate(event, args);
+              }
+            });
           });
 
           this._eventHandler.subscribe(this.onAfterRowDetailToggle, async (event, args) => {
diff --git a/package.json b/package.json
@@ -51,7 +51,6 @@
     "prettier:write": "prettier --write **/*.{html,js,ts,tsx,vue}",
     "test": "vitest --config ./test/vitest.config.mts",
     "test:coverage": "vitest --no-watch --coverage --config ./test/vitest.config.mts",
-    "test:watch": "vitest --config ./test/vitest.config.mts",
     "test:ui": "vitest --ui --config ./test/vitest.config.mts",
     "prepare": "husky",
     "commitlint": "commitlint --edit",
@@ -65,7 +64,6 @@
     "angular:serve": "pnpm -r --stream --filter=angular-slickgrid run angular:preview",
     "angular:test": "pnpm --stream --filter=angular-slickgrid run test",
     "angular:test:coverage": "pnpm --stream --filter=angular-slickgrid run test:coverage",
-    "angular:test:watch": "pnpm --stream --filter=angular-slickgrid test:watch",
     "aurelia:install": "pnpm install --filter=aurelia-slickgrid-demo --filter=aurelia-slickgrid --filter=./packages",
     "aurelia:build": "pnpm aurelia:build:framework && pnpm aurelia:build:demo",
     "aurelia:build:framework": "pnpm -r --stream --filter=aurelia-slickgrid run build",
diff --git a/test/cypress/e2e/example20.cy.ts b/test/cypress/e2e/example20.cy.ts
@@ -281,4 +281,14 @@ describe('Example 20 - Row Detail View', () => {
 
     cy.get('[data-test="row-selections"]').contains('2,4');
   });
+
+  it('should expect the Row Detail to be re-rendered after expanding/collapsing multiple times', () => {
+    cy.get('.grid20').find('.slick-row:nth(5) .slick-cell:nth(1)').as('toggle1');
+    cy.get('@toggle1').click();
+    cy.get('@toggle1').click();
+    cy.get('@toggle1').click();
+
+    cy.get('.grid20').find('.slick-cell + .dynamic-cell-detail .innerDetailView_9').as('detailContainer');
+    cy.get('@detailContainer').find('h4').contains('Task 9');
+  });
 });

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@`
`10`	`10`	`{`
`11`	`11`	`"label": "Run Angular Unit Tests (watch)",`
`12`	`12`	`"type": "shell",`
`13`		`- "command": "pnpm angular:test:watch",`
	`13`	`+ "command": "pnpm angular:test",`
`14`	`14`	`"problemMatcher": []`
`15`	`15`	`},`
`16`	`16`	`{`
`@@ -22,7 +22,7 @@`
`22`	`22`	`{`
`23`	`23`	`"label": "Run Vanilla Unit Tests (watch)",`
`24`	`24`	`"type": "shell",`
`25`		`- "command": "pnpm test:watch",`
	`25`	`+ "command": "pnpm test",`
`26`	`26`	`"problemMatcher": []`
`27`	`27`	`},`
`28`	`28`	`{`