From 4ca3898e0d0c22c0cea2d439af33455fcec9cce2 Mon Sep 17 00:00:00 2001
From: Ivaylo Plashkov <ivaylo.plashkov@sap.com>
Date: Fri, 24 Nov 2023 09:01:18 +0200
Subject: [PATCH] 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
---
 packages/main/src/Table.ts             | 18 ++++++++----------
 packages/main/test/specs/Table.spec.js |  5 +++++
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/main/src/Table.ts b/packages/main/src/Table.ts
index 7930cf4c1c63..a88eab575268 100644
--- 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
index 10c5d7dc8732..12a34922f44a 100644
--- 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 () => {