fix(DataTable): remove collapsed rows from dom (#116)

rotki · Jan 11, 2024 · 67e5b9c · 67e5b9c
1 parent b181bfe
commit 67e5b9c
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 20 deletions.
diff --git a/example/cypress/e2e/data-table.cy.ts b/example/cypress/e2e/data-table.cy.ts
@@ -120,8 +120,8 @@ describe('DataTable', () => {
     cy.get('@buttons').eq(2).as('button2');
 
     cy.get('@multiple')
-      .find('table tbody tr[hidden] div[data-cy=expanded-content]')
-      .should('exist');
+      .find('table tbody tr div[data-cy=expanded-content]')
+      .should('not.exist');
 
     cy.get('@button1').click();
 
@@ -163,8 +163,8 @@ describe('DataTable', () => {
     cy.get('@buttons').eq(2).as('button2');
 
     cy.get('@single')
-      .find('table tbody tr[hidden] div[data-cy=expanded-content]')
-      .should('exist');
+      .find('table tbody tr div[data-cy=expanded-content]')
+      .should('not.exist');
 
     cy.get('@button1').click();
 

diff --git a/example/cypress/e2e/tabs.cy.ts b/example/cypress/e2e/tabs.cy.ts
@@ -27,6 +27,10 @@ describe('Tabs', () => {
 
     // Click third tab
     cy.get('@tablist').find('button:nth-child(3)').click();
+    cy.get('@tabcontent').find('> div > div:nth-child(3)').should('be.visible');
+    cy.get('@tabcontent')
+      .find('> div > div:nth-child(3)')
+      .should('have.class', 'active-tab-item');
     cy.get('@tabcontent').should('have.text', 'Tab 3 Content');
 
     // Click last tab should redirect to stepper page

diff --git a/example/cypress/support/e2e.ts b/example/cypress/support/e2e.ts
@@ -15,3 +15,12 @@
 
 // Import commands.js using ES2015 syntax:
 import './commands';
+
+Cypress.on('uncaught:exception', (e) => {
+  if (
+    /ResizeObserver loop completed/.test(e.message) ||
+    /ResizeObserver loop limit exceeded/.test(e.message)
+  ) {
+    return false;
+  }
+});
diff --git a/src/components/tables/DataTable.spec.ts b/src/components/tables/DataTable.spec.ts
@@ -125,9 +125,9 @@ describe('DataTable', () => {
 
     expect(
       wrapper
-        .find('tbody tr[hidden]:nth-child(2) div[data-cy=expanded-content]')
+        .find('tbody tr:nth-child(2) div[data-cy=expanded-content]')
         .exists(),
-    ).toBeTruthy();
+    ).toBeFalsy();
 
     await wrapper
       .find('tbody tr:nth-child(1) button[class*=_tr__expander_button]')
@@ -141,9 +141,9 @@ describe('DataTable', () => {
 
     expect(
       wrapper
-        .find('tbody tr[hidden]:nth-child(2) div[data-cy=expanded-content]')
+        .find('tbody tr:nth-child(2) div[data-cy=expanded-content]')
         .exists(),
-    ).toBeFalsy();
+    ).toBeTruthy();
   });
 
   it('multiple expand toggles correctly', async () => {
@@ -172,7 +172,7 @@ describe('DataTable', () => {
       wrapper
         .find('tbody tr[hidden]:nth-child(2) div[data-cy=expanded-content]')
         .exists(),
-    ).toBeTruthy();
+    ).toBeFalsy();
 
     await wrapper
       .find('tbody tr:nth-child(1) button[class*=_tr__expander_button]')
@@ -188,7 +188,7 @@ describe('DataTable', () => {
 
     expect(
       wrapper
-        .find('tbody tr:not(hidden):nth-child(2) div[data-cy=expanded-content]')
+        .find('tbody tr:nth-child(2) div[data-cy=expanded-content]')
         .exists(),
     ).toBeTruthy();
 
@@ -206,7 +206,7 @@ describe('DataTable', () => {
 
     expect(
       wrapper
-        .find('tbody tr:not(hidden):nth-child(4) div[data-cy=expanded-content]')
+        .find('tbody tr:nth-child(4) div[data-cy=expanded-content]')
         .exists(),
     ).toBeTruthy();
   });
@@ -236,9 +236,9 @@ describe('DataTable', () => {
 
     expect(
       wrapper
-        .find('tbody tr[hidden]:nth-child(2) div[data-cy=expanded-content]')
+        .find('tbody tr:nth-child(2) div[data-cy=expanded-content]')
         .exists(),
-    ).toBeTruthy();
+    ).toBeFalsy();
 
     await wrapper
       .find('tbody tr:nth-child(1) button[class*=_tr__expander_button]')
@@ -254,7 +254,7 @@ describe('DataTable', () => {
 
     expect(
       wrapper
-        .find('tbody tr:not(hidden):nth-child(2) div[data-cy=expanded-content]')
+        .find('tbody tr:nth-child(2) div[data-cy=expanded-content]')
         .exists(),
     ).toBeTruthy();
 
@@ -266,9 +266,9 @@ describe('DataTable', () => {
 
     expect(
       wrapper
-        .find('tbody tr[hidden]:nth-child(2) div[data-cy=expanded-content]')
+        .find('tbody tr:nth-child(2) div[data-cy=expanded-content]')
         .exists(),
-    ).toBeTruthy();
+    ).toBeFalsy();
 
     await wrapper
       .find('tbody tr:nth-child(1) button[class*=_tr__expander_button]')
@@ -294,9 +294,9 @@ describe('DataTable', () => {
 
     expect(
       wrapper
-        .find('tbody tr:not(hidden):nth-child(4) div[data-cy=expanded-content]')
+        .find('tbody tr:nth-child(4) div[data-cy=expanded-content]')
         .exists(),
-    ).toBeTruthy();
+    ).toBeFalsy();
   });
 
   it('sticky header behaves as expected', async () => {

diff --git a/src/components/tables/DataTable.vue b/src/components/tables/DataTable.vue
@@ -1018,9 +1018,8 @@ onMounted(() => {
               </tr>
 
               <tr
-                v-if="expandable"
+                v-if="expandable && isExpanded(row[rowAttr])"
                 :key="`row-expand-${index}`"
-                :hidden="!isExpanded(row[rowAttr])"
                 :class="[css.tr, css.tr__expandable]"
               >
                 <td :colspan="colspan" :class="[css.td]">