fix(ui5-toolbar): prevent flickering (#12285)

* fix(ui5-toolbar): prevent flickering

* fix(ui5-toolbar): prevent flickering

Author: PetyaMarkovaBogdanova

packages/main/cypress/specs/ToolbarSelect.cy.tsx

@@ -259,4 +259,27 @@ describe("Toolbar general interaction", () => {
 				.should("have.attr", "value", "Option 3");
 		});
 	});
+
+	it("Should handle toolbar-select with width larger than the toolbar", async () => {
+		cy.mount(
+			<Toolbar id="otb_d">
+				<ToolbarSelect style="width: 201px;" id="toolbar-select">
+						<ToolbarSelectOption>1</ToolbarSelectOption>
+						<ToolbarSelectOption selected>2</ToolbarSelectOption>
+						<ToolbarSelectOption>3</ToolbarSelectOption>
+					</ToolbarSelect>
+			</Toolbar>
+		);
+		cy.viewport(220, 1080); // Set a small viewport width to trigger overflow
+
+		// Add a toolbar-select element with a large width
+		cy.get("#otb_d").shadow().within(() => {
+			cy.wait(2000);
+			// Click the overflow button
+			cy.get(".ui5-tb-overflow-btn").click();
+		});
+
+		// Verify the toolbar-select is rendered inside the popover
+		cy.get("ui5-toolbar-select").should("be.visible");
+	});
 });

packages/main/src/Toolbar.ts

@@ -499,7 +499,7 @@ class Toolbar extends UI5Element {
 
 		let itemWidth = 0;
 
-		if (renderedItem && renderedItem.offsetWidth) {
+		if (renderedItem && !renderedItem.classList.contains("ui5-tb-popover-item") && renderedItem.offsetWidth && item._isRendering === false) {
 			const ItemCSSStyleSet = getComputedStyle(renderedItem);
 			itemWidth = renderedItem.offsetWidth + parsePxValue(ItemCSSStyleSet, "margin-inline-end")
 				+ parsePxValue(ItemCSSStyleSet, "margin-inline-start");

packages/main/src/ToolbarItem.ts

@@ -60,6 +60,11 @@ class ToolbarItem extends UI5Element {
 	@property({ type: Boolean })
 	isOverflowed: boolean = false;
 
+	_isRendering = true;
+
+	onAfterRendering(): void {
+		this._isRendering = false;
+	}
 	/**
 	* Defines if the width of the item should be ignored in calculating the whole width of the toolbar
 	* @protected

packages/main/src/ToolbarSelect.ts

@@ -210,7 +210,7 @@ class ToolbarSelect extends ToolbarItem {
 
 	get styles() {
 		return {
-			width: this.width,
+			width: this.isOverflowed ? undefined : this.width,
 		};
 	}
 

packages/main/src/themes/ToolbarSelect.css

@@ -2,7 +2,8 @@
     width: 100%;
 }
 
-.ui5-tb-popover-item {
-    width: inherit;
+:host([is-overflowed]) .ui5-tb-popover-item {
+    align-items: inherit;
+    width: 100%;
 }