diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8d49c641151..4f8a82acff4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@
**Bug fixes**
- Fixed tick and level alignment in `Eui[Dual]Range` ([#5181](https://github.com/elastic/eui/pull/5181))
+- Fixed duplicate IDs on mobile/desktop select all checkboxes in `EuiBasicTable` ([#5237](https://github.com/elastic/eui/pull/5237))
**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
index 6ed41a36a5e..1c134126f7b 100644
--- a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
+++ b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
@@ -1463,7 +1463,7 @@ exports[`EuiBasicTable with initial selection 1`] = `
checked={false}
compressed={false}
disabled={false}
- id="_selection_column-checkbox_generated-id"
+ id="_selection_column-checkbox_generated-id_mobile"
indeterminate={false}
label="Select all rows"
onChange={[Function]}
@@ -1476,7 +1476,7 @@ exports[`EuiBasicTable with initial selection 1`] = `
checked={false}
className="euiCheckbox__input"
disabled={false}
- id="_selection_column-checkbox_generated-id"
+ id="_selection_column-checkbox_generated-id_mobile"
onChange={[Function]}
type="checkbox"
/>
@@ -1485,7 +1485,7 @@ exports[`EuiBasicTable with initial selection 1`] = `
/>
@@ -1552,7 +1552,7 @@ exports[`EuiBasicTable with initial selection 1`] = `
compressed={false}
data-test-subj="checkboxSelectAll"
disabled={false}
- id="_selection_column-checkbox_generated-id"
+ id="_selection_column-checkbox_generated-id_desktop"
indeterminate={false}
label={null}
onChange={[Function]}
@@ -1567,7 +1567,7 @@ exports[`EuiBasicTable with initial selection 1`] = `
className="euiCheckbox__input"
data-test-subj="checkboxSelectAll"
disabled={false}
- id="_selection_column-checkbox_generated-id"
+ id="_selection_column-checkbox_generated-id_desktop"
onChange={[Function]}
type="checkbox"
/>
diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
index bda515ad70b..4b92ccaea39 100644
--- a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
+++ b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
@@ -923,7 +923,7 @@ exports[`EuiInMemoryTable with initial selection 1`] = `
checked={false}
compressed={false}
disabled={false}
- id="_selection_column-checkbox_generated-id"
+ id="_selection_column-checkbox_generated-id_mobile"
indeterminate={false}
label="Select all rows"
onChange={[Function]}
@@ -936,7 +936,7 @@ exports[`EuiInMemoryTable with initial selection 1`] = `
checked={false}
className="euiCheckbox__input"
disabled={false}
- id="_selection_column-checkbox_generated-id"
+ id="_selection_column-checkbox_generated-id_mobile"
onChange={[Function]}
type="checkbox"
/>
@@ -945,7 +945,7 @@ exports[`EuiInMemoryTable with initial selection 1`] = `
/>
@@ -1012,7 +1012,7 @@ exports[`EuiInMemoryTable with initial selection 1`] = `
compressed={false}
data-test-subj="checkboxSelectAll"
disabled={false}
- id="_selection_column-checkbox_generated-id"
+ id="_selection_column-checkbox_generated-id_desktop"
indeterminate={false}
label={null}
onChange={[Function]}
@@ -1027,7 +1027,7 @@ exports[`EuiInMemoryTable with initial selection 1`] = `
className="euiCheckbox__input"
data-test-subj="checkboxSelectAll"
disabled={false}
- id="_selection_column-checkbox_generated-id"
+ id="_selection_column-checkbox_generated-id_desktop"
onChange={[Function]}
type="checkbox"
/>
diff --git a/src/components/basic_table/basic_table.tsx b/src/components/basic_table/basic_table.tsx
index 2f33233c68a..a8e4ff2d4bc 100644
--- a/src/components/basic_table/basic_table.tsx
+++ b/src/components/basic_table/basic_table.tsx
@@ -528,7 +528,6 @@ export class EuiBasicTable extends Component<
}
tableId = htmlIdGenerator('__table')();
- selectAllCheckboxId = htmlIdGenerator('_selection_column-checkbox')();
render() {
const {
@@ -733,6 +732,8 @@ export class EuiBasicTable extends Component<
);
}
+ selectAllIdGenerator = htmlIdGenerator('_selection_column-checkbox');
+
renderSelectAll = (isMobile: boolean) => {
const { items, selection } = this.props;
@@ -763,7 +764,7 @@ export class EuiBasicTable extends Component<
{(selectAllRows: string) => (