Prevent table row expansion to leak between table pages

CHANGELOG.md

@@ -15,6 +15,7 @@ No public interface changes since `0.0.45`.
 - 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)
 

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

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>