[EuiBasicTable] Fix generated IDs regenerating on rerender (#5196)

* [Fix] BasicTable DefaultItemAction generated ID * Fix Select All checkbox ID
elastic · Sep 20, 2021 · 571ebc4 · 571ebc4
1 parent bf72cba
commit 571ebc4
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/src/components/basic_table/basic_table.tsx b/src/components/basic_table/basic_table.tsx
@@ -528,6 +528,7 @@ export class EuiBasicTable<T = any> extends Component<
   }
 
   tableId = htmlIdGenerator('__table')();
+  selectAllCheckboxId = htmlIdGenerator('_selection_column-checkbox')();
 
   render() {
     const {
@@ -762,7 +763,7 @@ export class EuiBasicTable<T = any> extends Component<
       <EuiI18n token="euiBasicTable.selectAllRows" default="Select all rows">
         {(selectAllRows: string) => (
           <EuiCheckbox
-            id={`_selection_column-checkbox_${htmlIdGenerator()()}`}
+            id={this.selectAllCheckboxId}
             type={isMobile ? undefined : 'inList'}
             checked={checked}
             disabled={disabled}

diff --git a/src/components/basic_table/default_item_action.tsx b/src/components/basic_table/default_item_action.tsx
@@ -16,7 +16,7 @@ import {
 } from '../button';
 import { EuiToolTip } from '../tool_tip';
 import { DefaultItemAction as Action } from './action_types';
-import { htmlIdGenerator } from '../../services/accessibility';
+import { useGeneratedHtmlId } from '../../services/accessibility';
 import { EuiScreenReaderOnly } from '../accessibility';
 
 export interface DefaultItemActionProps<T> {
@@ -57,12 +57,12 @@ export const DefaultItemAction = <T extends {}>({
   let button;
   const actionContent =
     typeof action.name === 'function' ? action.name(item) : action.name;
+  const ariaLabelId = useGeneratedHtmlId();
   if (action.type === 'icon') {
     if (!icon) {
       throw new Error(`Cannot render item action [${action.name}]. It is configured to render as an icon but no
       icon is provided. Make sure to set the 'icon' property of the action`);
     }
-    const ariaLabelId = htmlIdGenerator()();
     button = (
       <>
         <EuiButtonIcon