From 3a2f8e365a2319176e70e4e8cc8e575f58511c6f Mon Sep 17 00:00:00 2001
From: Dobrin Dimchev <dobrin.dimchev@sap.com>
Date: Wed, 15 Jan 2025 10:30:01 +0200
Subject: [PATCH] fix(ui5-toolbar): correct display of overflow button in
 hidden container (#10529)

---
 packages/main/cypress/specs/Toolbar.cy.ts     | 26 +++++++++++++++++++
 packages/main/src/Toolbar.ts                  |  3 +++
 .../sap_horizon_dark/parameters-bundle.css    |  1 +
 3 files changed, 30 insertions(+)

diff --git a/packages/main/cypress/specs/Toolbar.cy.ts b/packages/main/cypress/specs/Toolbar.cy.ts
index 6487687b47f0..dcac7cf0432d 100644
--- a/packages/main/cypress/specs/Toolbar.cy.ts
+++ b/packages/main/cypress/specs/Toolbar.cy.ts
@@ -96,4 +96,30 @@ describe("Toolbar general interaction", () => {
 			.find(".ui5-tb-overflow-btn-hidden")
 			.should("exist", "hidden class attached to tb button, meaning it's not shown as expected");
 	});
+
+	it("shouldn't display the overflow button when initially rendered in a hidden container and later made visible", () => {
+		cy.mount(html`
+			<div id="otb_hidden_container" style="display:none;">
+				<ui5-toolbar id="otb_hidden">
+					<ui5-toolbar-button icon="add" text="Append"></ui5-toolbar-button>
+				</ui5-toolbar>
+			</div>
+		`);
+
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(500);
+
+		cy.get("#otb_hidden_container")
+			.as("hiddenContainer");
+
+		// show the hidden container
+		cy.get("@hiddenContainer")
+			.invoke("show");
+
+		// overflowbutton should not be rendered
+		cy.get("#otb_hidden")
+			.shadow()
+			.find(".ui5-tb-overflow-btn-hidden")
+			.should("exist", "hidden class attached to tb button, meaning it's not shown as expected");
+	});
 });
diff --git a/packages/main/src/Toolbar.ts b/packages/main/src/Toolbar.ts
index 1eacfdca57dc..82d96a4c4aad 100644
--- a/packages/main/src/Toolbar.ts
+++ b/packages/main/src/Toolbar.ts
@@ -353,6 +353,9 @@ class Toolbar extends UI5Element {
 	 */
 
 	processOverflowLayout() {
+		if (this.offsetWidth === 0) {
+			return;
+		}
 		const containerWidth = this.offsetWidth - this.padding;
 		const contentWidth = this.itemsWidth;
 		let overflowSpace = contentWidth - containerWidth + this.overflowButtonSize;
diff --git a/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css b/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css
index 878c665b9420..4070f300d8c4 100644
--- a/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css
+++ b/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css
@@ -52,6 +52,7 @@
 @import "./ToggleButton-parameters.css";
 @import "./YearPicker-parameters.css";
 @import "./CalendarHeader-parameters.css";
+@import "../base/Toolbar-parameters.css";
 @import "./Token-parameters.css";
 @import "./Tokenizer-parameters.css";
 @import "./MultiComboBox-parameters.css";