diff --git a/packages/table/src/TableCheckboxCell.ts b/packages/table/src/TableCheckboxCell.ts index 9e70329a90..e9e1a684b8 100644 --- a/packages/table/src/TableCheckboxCell.ts +++ b/packages/table/src/TableCheckboxCell.ts @@ -52,6 +52,10 @@ export class TableCheckboxCell extends SpectrumElement { @property({ type: Boolean, reflect: true, attribute: 'selects-single' }) public selectsSingle = false; + public override click(): void { + this.checkbox.click(); + } + protected override render(): TemplateResult { return html` el.localName === 'sp-table-checkbox-cell' + ); + } + protected manageSelected(): void { const [checkboxCell] = this.checkboxCells; if (!checkboxCell) return; checkboxCell.checked = this.selected; } + protected handleClick(event: Event): void { + if ( + event + .composedPath() + .find( + (node) => (node as HTMLElement).localName === 'sp-checkbox' + ) + ) { + return; + } + const [checkboxCell] = this.checkboxCells; + if (!checkboxCell) return; + checkboxCell.click(); + } + protected override render(): TemplateResult { return html` - + `; } @@ -76,5 +106,12 @@ export class TableRow extends SpectrumElement { if (changed.has('selected')) { this.manageSelected(); } + if (changed.has('selectable')) { + if (this.selectable) { + this.addEventListener('click', this.handleClick); + } else { + this.removeEventListener('click', this.handleClick); + } + } } } diff --git a/packages/table/test/table-selects.test.ts b/packages/table/test/table-selects.test.ts index 2561a08111..9796f1fd54 100644 --- a/packages/table/test/table-selects.test.ts +++ b/packages/table/test/table-selects.test.ts @@ -170,6 +170,12 @@ describe('Table Selects', () => { expect(rowThreeCheckbox.checkbox.checked).to.be.true; expect(rowTwoCheckbox.checkbox.checked).to.be.false; expect(el.selected.length).to.equal(1); + + rowTwo.click(); + await elementUpdated(el); + + expect(rowTwoCheckbox.checked).to.be.true; + expect(el.selected).to.deep.equal(['row2']); }); it('surfaces [selects="multiple"] selection', async () => { diff --git a/packages/table/test/virtualized-table-selects.test.ts b/packages/table/test/virtualized-table-selects.test.ts index ef5321d33a..a605afdb2b 100644 --- a/packages/table/test/virtualized-table-selects.test.ts +++ b/packages/table/test/virtualized-table-selects.test.ts @@ -209,6 +209,11 @@ describe('Virtualized Table Selects', () => { await elementUpdated(el); expect(el.selected).to.deep.equal(['2']); + + rowTwo.click(); + await elementUpdated(el); + + expect(el.selected).to.deep.equal(['1']); }); it('surfaces [selects="multiple"] selection on Virtualized Table', async () => {