fix(ui5-table): check select all checkbox, when all rows are selected…

… programatically (#4455) * fix(ui5-table): check select all checkbox, when all rows are selected programatically * remove change added by mistake * additional test added
SAP · Dec 9, 2021 · 7baabfa · 7baabfa
1 parent 1416d42
commit 7baabfa
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 0 deletions.
diff --git a/packages/main/src/Table.js b/packages/main/src/Table.js
@@ -51,6 +51,7 @@ const metadata = {
 			propertyName: "rows",
 			type: HTMLElement,
 			individualSlots: true,
+			invalidateOnChildChange: true,
 		},
 
 		/**
@@ -434,6 +435,7 @@ class Table extends UI5Element {
 		const columnSettings = this.getColumnPropagationSettings();
 		const columnSettingsString = JSON.stringify(columnSettings);
 		const rowsCount = this.rows.length;
+		const selectedRows = this.selectedRows;
 
 		this.rows.forEach((row, index) => {
 			if (row._columnsInfoString !== columnSettingsString) {
@@ -455,6 +457,8 @@ class Table extends UI5Element {
 
 		this._noDataDisplayed = !this.rows.length && !this.hideNoData;
 		this.visibleColumnsCount = this.visibleColumns.length;
+
+		this._allRowsSelected = selectedRows.length === this.rows.length;
 	}
 
 	onAfterRendering() {

diff --git a/packages/main/test/specs/Table.spec.js b/packages/main/test/specs/Table.spec.js
@@ -371,6 +371,36 @@ describe("Table general interaction", () => {
 			assert.strictEqual(await selectionChangeCount.getProperty("value"), "5",  "Enter key over an already selected row should trigger selection-change event");
 		});
 
+		it("test selectAll functionallity in MultiSelect mode", async () => {
+			await browser.url("http://localhost:8080/test-resources/pages/TableSelection.html");
+			const firstRow = await browser.$("#firstRowMultiSelect");
+			const secondRow = await browser.$("#secondRowMultiSelect");
+			const thirdRow = await browser.$("#thirdRowMultiSelect");
+			const forthRow = await browser.$("#forthRowMultiSelect");
+			const table = await browser.$("#multi");
+			const selectAllCheckBox = await table.shadow$("thead ui5-checkbox");
+
+			// act
+			await firstRow.setProperty("selected", true);
+			await secondRow.setProperty("selected", true);
+			await thirdRow.setProperty("selected", true);
+			await forthRow.setProperty("selected", true);
+
+			// assert
+			assert.ok(await firstRow.getAttribute("selected"), "The first row is selected");
+			assert.ok(await secondRow.getAttribute("selected"), "The second row is selected");
+			assert.ok(await thirdRow.getAttribute("selected"), "The third row is selected");
+			assert.ok(await forthRow.getAttribute("selected"), "The forth row is selected");
+			assert.ok(await selectAllCheckBox.getProperty("checked"), "Select all checkbox is checked");
+
+			// act
+			await forthRow.setProperty("selected", false);
+
+			// assert
+			assert.notOk(await forthRow.getAttribute("selected"), "The forth row is not selected");
+			assert.notOk(await selectAllCheckBox.getProperty("checked"), "Select all checkbox is not checked");
+		});
+
 		it("test mouse and keyboard interaction over Active/Inactive row in Default mode", async () => {
 			const table = await browser.$("#default");
 			const firstRow = await browser.$("#firstRowDefaultMode");