diff --git a/src/slickgrid-react/extensions/slickRowDetailView.ts b/src/slickgrid-react/extensions/slickRowDetailView.ts index 42e8496..4680307 100644 --- a/src/slickgrid-react/extensions/slickRowDetailView.ts +++ b/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) => { diff --git a/test/cypress/e2e/example19.cy.ts b/test/cypress/e2e/example19.cy.ts index 4502c15..f309ffb 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'); + }); });