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) => (