fix(ui5-table): popin-change is now fired on pop out (#7837)

* fix(ui5-table): popin-change is now fired on pop out * fix(ui5-table): popin-change is now fired on pop out * revert yarn.lock * fix yarn.lock * correct conditional
SAP · Nov 24, 2023 · 4ca3898 · 4ca3898
1 parent bce4b93
commit 4ca3898
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git a/packages/main/src/Table.ts b/packages/main/src/Table.ts
@@ -415,7 +415,7 @@ class Table extends UI5Element {
 	@property({ defaultValue: "" })
 	accessibleNameRef!: string;
 
-	@property({	type: Object, multiple: true })
+	@property({ type: Object, multiple: true })
 	_hiddenColumns!: Array<TableColumnInfo>;
 
 	@property({ type: Boolean })
@@ -940,7 +940,7 @@ class Table extends UI5Element {
 		this._itemNavigation.setCurrentItem(this._columnHeader);
 	}
 
-	_onColumnHeaderClick(e: MouseEvent| KeyboardEvent) {
+	_onColumnHeaderClick(e: MouseEvent | KeyboardEvent) {
 		if (!e.target) {
 			this.columnHeader!.focus();
 		}
@@ -1116,7 +1116,6 @@ class Table extends UI5Element {
 	checkTableInViewport() {
 		this._inViewport = isElementInView(this.getDomRef()!);
 	}
-
 	popinContent() {
 		const clientRect: DOMRect = this.getDomRef()!.getBoundingClientRect();
 		const tableWidth: number = clientRect.width;
@@ -1144,15 +1143,14 @@ class Table extends UI5Element {
 		}
 
 		const hiddenColumnsChange = (this._hiddenColumns.length !== hiddenColumns.length) || this._hiddenColumns.some((column, index) => column !== hiddenColumns[index]);
+		const shownColumnsChange = hiddenColumns.length === 0;
 
-		// invalidate only if hidden columns count has changed
-		if (hiddenColumnsChange) {
+		// invalidate if hidden columns count has changed or columns are shown
+		if (hiddenColumnsChange || shownColumnsChange) {
 			this._hiddenColumns = hiddenColumns;
-			if (hiddenColumns.length) {
-				this.fireEvent<TablePopinChangeEventDetail>("popin-change", {
-					poppedColumns: this._hiddenColumns,
-				});
-			}
+			this.fireEvent<TablePopinChangeEventDetail>("popin-change", {
+				poppedColumns: this._hiddenColumns,
+			});
 		}
 	}
 

diff --git a/packages/main/test/specs/Table.spec.js b/packages/main/test/specs/Table.spec.js
@@ -34,10 +34,15 @@ describe("Table general interaction", () => {
 	it("tests if popinChange is fired when min-width is reacted (500px)", async () => {
 		let tableLabel = await browser.$("#tableLabel");
 		const btn = await browser.$("#size-btn-500");
+		const btn2 = await browser.$("#size-btn-650");
 
 		await btn.click();
 
 		assert.strictEqual(await tableLabel.getHTML(false), "Number of poppedColumns: 4", "popinChange should be fired and columns should be 4");
+
+		await btn2.click();
+
+		assert.strictEqual(await tableLabel.getHTML(false), "Number of poppedColumns: 2", "popinChange should be fired and columns should be 2");
 	});
 
 	it("tests row-click is fired", async () => {