with the CSP safe code implementation, the SlickRowDetail stopped working because it was using a hack. The hack was to using html string and add closing div tag to fall outside the .slick-cell but now that we use native HTML element then this hack no longer works. What we can do now is to add an optional insertElementAfterTarget that will provide a way to insert our Row Detail container element after our target which is this case is the .slick-cell
TODOs
[x] replace HTML string with the use of native HTML element inside SlickRowDetail
[x] add proper Cypress E2E tests to make sure that the row detail div is at the correct location in the DOM
before
after
the issue was because we append everything into the .slick-cell HTML element inside it but SlickRowDetail was hacking the html string to insert the HTML element after the .slick-cell. So our new code will simply do it in the correct way via insertElementAfterTarget
we can see below, the .dynamic-cell-detail div is supposed to go after the .slick-cell.l0.r0 but was instead within it which was wrong and causing the regression
with the CSP safe code implementation, the SlickRowDetail stopped working because it was using a hack. The hack was to using html string and add closing div tag to fall outside the
.slick-cellbut now that we use native HTML element then this hack no longer works. What we can do now is to add an optionalinsertElementAfterTargetthat will provide a way to insert our Row Detail container element after our target which is this case is the.slick-cellTODOs
before
after
the issue was because we append everything into the
.slick-cellHTML element inside it but SlickRowDetail was hacking the html string to insert the HTML element after the.slick-cell. So our new code will simply do it in the correct way viainsertElementAfterTargetwe can see below, the
.dynamic-cell-detaildiv is supposed to go after the.slick-cell.l0.r0but was instead within it which was wrong and causing the regression