From 56f835a21d325ec209247f2015d092ca8b066996 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Wed, 7 May 2025 20:19:58 -0400 Subject: [PATCH] fix: Row Detail open/close multiple times should always re-render --- .../src/extensions/slickRowDetailView.ts | 13 ++++++++----- test/cypress/e2e/example19.cy.ts | 17 +++++++++++++++++ 2 files changed, 25 insertions(+), 5 deletions(-) diff --git a/packages/aurelia-slickgrid/src/extensions/slickRowDetailView.ts b/packages/aurelia-slickgrid/src/extensions/slickRowDetailView.ts index ace23a31a..f73d84448 100644 --- a/packages/aurelia-slickgrid/src/extensions/slickRowDetailView.ts +++ b/packages/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/test/cypress/e2e/example19.cy.ts b/test/cypress/e2e/example19.cy.ts index 4502c1539..f309ffb48 100644 --- a/test/cypress/e2e/example19.cy.ts +++ b/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'); + }); });