[EuiBasicTable] Always use Column Index for Footer key (elastic#3559)

This forces all keys to be unique regardless of field name collisions and computed columns. Co-authored-by: Caroline Horn <[email protected]>
kqualters-elastic · Jun 4, 2020 · 08d94fe · 08d94fe
1 parent b1ae07e
commit 08d94fe
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,7 @@
 
 - Fixed `EuiKeyPadMenu` and `EuiKeyPadMenuItem` aria roles ([#3502](https://github.com/elastic/eui/pull/3502))
 - Fixed `EuiFieldSearch` input clear button doesn't show when external input is passed([#3497](https://github.com/elastic/eui/pull/3497))
+- Fixed `EuiBasicTable` footers to always use a unique `key` ([#3559](https://github.com/elastic/eui/pull/3559))
 
 **Breaking changes**
 

diff --git a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
@@ -958,19 +958,19 @@ exports[`EuiBasicTable footers render with pagination, selection, sorting, and f
           key="_selection_column_f"
         />
         <EuiTableFooterCell
-          key="footer_name"
+          key="footer_name_0"
         >
           <strong>
             Name
           </strong>
         </EuiTableFooterCell>
         <EuiTableFooterCell
-          key="footer_id"
+          key="footer_id_1"
         >
           ID
         </EuiTableFooterCell>
         <EuiTableFooterCell
-          key="footer_age"
+          key="footer_age_2"
         >
           <strong>
             sum:

diff --git a/src/components/basic_table/basic_table.tsx b/src/components/basic_table/basic_table.tsx
@@ -864,7 +864,9 @@ export class EuiBasicTable<T = any> extends Component<
 
       if (footer) {
         footers.push(
-          <EuiTableFooterCell key={`footer_${field}`} align={align}>
+          <EuiTableFooterCell
+            key={`footer_${field}_${footers.length - 1}`}
+            align={align}>
             {footer}
           </EuiTableFooterCell>
         );