Prevent table row expansion to leak between table pages (#761)

* fix expandedRowId * changelog
elastic · May 3, 2018 · ef5fb86 · ef5fb86
1 parent 67dfe33
commit ef5fb86
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,6 +16,7 @@
 - Fixed `EuiTableRowCell` from overwriting its child element's `className` [#709](https://github.com/elastic/eui/pull/709)
 - Allow `EuiContextMenuPanel`s to update when their `children` changes ([#710](https://github.com/elastic/eui/pull/710))
 - `EuiInMemoryTable` now passes `itemIdToExpandedRowMap` prop to `EuiBasicTable` ([#759](https://github.com/elastic/eui/pull/759))
+- Expanded table rows in paginated data no longer leak to other pages ([#761](https://github.com/elastic/eui/pull/761))
 
 ## [`0.0.44`](https://github.com/elastic/eui/tree/v0.0.44)
 

diff --git a/src/components/basic_table/__snapshots__/basic_table.test.js.snap b/src/components/basic_table/__snapshots__/basic_table.test.js.snap
@@ -225,6 +225,7 @@ exports[`EuiBasicTable itemIdToExpandedRowMap renders an expanded row 1`] = `
           key="row_1"
         >
           <EuiTableRow
+            aria-owns="row_1_expansion"
             isSelected={false}
           >
             <EuiTableRowCell
@@ -237,6 +238,7 @@ exports[`EuiBasicTable itemIdToExpandedRowMap renders an expanded row 1`] = `
             </EuiTableRowCell>
           </EuiTableRow>
           <EuiTableRow
+            id="row_1_expansion"
             isExpandedRow={true}
           >
             <EuiTableRowCell
@@ -292,31 +294,31 @@ exports[`EuiBasicTable with pagination - 2nd page 1`] = `
       </EuiTableHeader>
       <EuiTableBody>
         <React.Fragment
-          key="row_0"
+          key="row_3"
         >
           <EuiTableRow
             isSelected={false}
           >
             <EuiTableRowCell
               align="left"
               header="Name"
-              key="_data_column_name_0_0"
+              key="_data_column_name_3_0"
               textOnly={true}
             >
               name1
             </EuiTableRowCell>
           </EuiTableRow>
         </React.Fragment>
         <React.Fragment
-          key="row_1"
+          key="row_4"
         >
           <EuiTableRow
             isSelected={false}
           >
             <EuiTableRowCell
               align="left"
               header="Name"
-              key="_data_column_name_1_0"
+              key="_data_column_name_4_0"
               textOnly={true}
             >
               name2

diff --git a/src/components/basic_table/basic_table.js b/src/components/basic_table/basic_table.js
@@ -436,7 +436,11 @@ export class EuiBasicTable extends Component {
       return this.renderEmptyBody();
     }
     const rows = items.map((item, index) => {
-      return this.renderItemRow(item, index);
+      // if there's pagination the item's index must be adjusted to the where it is in the whole dataset
+      const tableItemIndex = this.props.pagination ?
+        this.props.pagination.pageIndex * this.props.pagination.pageSize + index
+        : index;
+      return this.renderItemRow(item, tableItemIndex);
     });
     if (this.props.loading) {
       return <LoadingTableBody>{rows}</LoadingTableBody>;
@@ -505,9 +509,10 @@ export class EuiBasicTable extends Component {
     expandedRowColSpan = expandedRowColSpan - mobileOnlyCols;
 
     // We'll use the ID to associate the expanded row with the original.
-    const expandedRowId = itemIdToExpandedRowMap.length > 0 ? `row_${itemId}_expansion` : undefined;
-    const expandedRow = itemIdToExpandedRowMap[itemId] ? (
-      <EuiTableRow id={expandedRowId} key={expandedRowId} isExpandedRow={true} isSelectable={isSelectable}>
+    const hasExpandedRow = itemIdToExpandedRowMap.hasOwnProperty(itemId);
+    const expandedRowId = hasExpandedRow ? `row_${itemId}_expansion` : undefined;
+    const expandedRow = hasExpandedRow ? (
+      <EuiTableRow id={expandedRowId} isExpandedRow={true} isSelectable={isSelectable}>
         <EuiTableRowCell colSpan={expandedRowColSpan}>
           {itemIdToExpandedRowMap[itemId]}
         </EuiTableRowCell>