fix(ui5-shellbar): ignore non-ShellBarItem children in overflow calculation (2.23)

packages/fiori/cypress/specs/ShellBar.cy.tsx

@@ -1877,4 +1877,56 @@ describe("Start button spacing", () => {
 
 		cy.get("[ui5-shellbar]").shadow().find(".ui5-shellbar-start-button").should("have.css", "gap", "8px");
 	});
+});
+
+describe("Non-ShellBarItem children in default slot", () => {
+	it("should not throw 'processed too many times' when resizing across the overflow breakpoint with a stray <span> in the default slot", () => {
+		// Capture any errors thrown during the run — the bug surfaced as an
+		// uncaught Error: "Web component processed too many times this task,
+		// max allowed is: 10" from RenderQueue when the overflow algorithm
+		// failed to converge.
+		const errors: string[] = [];
+		cy.on("uncaught:exception", (err) => {
+			errors.push(err.message);
+			return false; // don't fail the test here; we assert below
+		});
+
+		cy.mount(
+			<ShellBar id="shellbar-stray" notificationsCount="72" showNotifications={true}>
+				<Button icon="menu2" slot="startButton"></Button>
+				<ShellBarBranding slot="branding">
+					Product Identifier
+					<img slot="logo" src="https://ui5.github.io/webcomponents/images/sap-logo-svg.svg" />
+				</ShellBarBranding>
+				<ShellBarSearch slot="searchField" showClearIcon placeholder="Search Apps, Products"></ShellBarSearch>
+				{/* The problem child — a stray non-ShellBarItem element in the default slot. */}
+				<span></span>
+				<Avatar slot="profile">
+					<img src="https://ui5.github.io/webcomponents/images/avatars/man_avatar_3.png" />
+				</Avatar>
+			</ShellBar>
+		);
+
+		cy.wait(RESIZE_THROTTLE_RATE);
+
+		// Oscillate across the overflow breakpoint several times. This is what
+		// triggered the runaway re-render in the regression — a single resize
+		// is not enough; the algorithm has to be invoked while the previous
+		// pass is still settling.
+		for (let i = 0; i < 6; i++) {
+			cy.viewport(1400, 800);
+			cy.wait(RESIZE_THROTTLE_RATE);
+			cy.viewport(320, 800);
+			cy.wait(RESIZE_THROTTLE_RATE);
+		}
+
+		// ShellBar must still be in the DOM and operating after the oscillation.
+		cy.get("#shellbar-stray").should("exist");
+
+		// And no "processed too many times" error must have fired.
+		cy.then(() => {
+			const matches = errors.filter(e => /processed too many times/i.test(e));
+			expect(matches, `unexpected RenderQueue errors:\n${matches.join("\n")}`).to.have.length(0);
+		});
+	});
 });

packages/fiori/src/ShellBar.ts

@@ -43,7 +43,7 @@ import ShellBarOverflow from "./shellbar/ShellBarOverflow.js";
 import ShellBarAccessibility from "./shellbar/ShellBarAccessibility.js";
 import ShellBarItemNavigation from "./shellbar/ShellBarItemNavigation.js";
 
-import ShellBarItem from "./ShellBarItem.js";
+import ShellBarItem, { isInstanceOfShellBarItem } from "./ShellBarItem.js";
 import ShellBarSpacer from "./ShellBarSpacer.js";
 import type ShellBarBranding from "./ShellBarBranding.js";
 import type { ShellBarOverflowResult } from "./shellbar/ShellBarOverflow.js";
@@ -764,7 +764,7 @@ class ShellBar extends UI5Element {
 		const result = this.overflow.updateOverflow({
 			actions: this.actions,
 			content: this.sortContent(this.content),
-			customItems: this.items,
+			customItems: this._validItems,
 			hiddenItemsIds: this.hiddenItemsIds,
 			showSearchField: this.enabledFeatures.search && this.showSearchField,
 			overflowOuter: this.overflowOuter!,
@@ -786,7 +786,7 @@ class ShellBar extends UI5Element {
 		const { hiddenItemsIds, showOverflowButton } = result;
 
 		// Update items overflow state
-		this.items.forEach(item => {
+		this._validItems.forEach(item => {
 			item.inOverflow = hiddenItemsIds.includes(item._id);
 			if (item.inOverflow) {
 				// clear the hidden class to ensure the item is visible in the overflow popover
@@ -862,11 +862,23 @@ class ShellBar extends UI5Element {
 	get overflowItems() {
 		return this.overflow.getOverflowItems({
 			actions: this.actions,
-			customItems: this.items,
+			customItems: this._validItems,
 			hiddenItemsIds: this.hiddenItemsIds,
 		});
 	}
 
+	/**
+	 * Only entries that are actually `ui5-shellbar-item` instances participate in the
+	 * overflow calculation and template rendering. The default slot's type is
+	 * `HTMLElement`, so any stray child (e.g. a bare `<span>`) ends up in `this.items`;
+	 * if such an element reaches the overflow algorithm it has no `_id` / `stableDomRef`,
+	 * which writes `undefined` back into reactive properties on every pass and re-enters
+	 * the render queue until `RenderQueue` throws "processed too many times".
+	 */
+	get _validItems(): ShellBarItem[] {
+		return this.items.filter(isInstanceOfShellBarItem);
+	}
+
 	/**
 	 * Returns badge text for overflow button.
 	 * Shows count if only one item with count is overflowed, otherwise shows attention dot.

packages/fiori/src/ShellBarItem.ts

@@ -3,6 +3,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import createInstanceChecker from "@ui5/webcomponents-base/dist/util/createInstanceChecker.js";
 import type { AccessibilityAttributes, UI5CustomEvent } from "@ui5/webcomponents-base";
 import Button from "@ui5/webcomponents/dist/Button.js";
 import ButtonBadge from "@ui5/webcomponents/dist/ButtonBadge.js";
@@ -109,6 +110,10 @@ class ShellBarItem extends UI5Element {
 		return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
 	}
 
+	get isShellBarItem(): boolean {
+		return true;
+	}
+
 	hasListItems() {
 		return this.inOverflow;
 	}
@@ -131,4 +136,5 @@ class ShellBarItem extends UI5Element {
 ShellBarItem.define();
 
 export default ShellBarItem;
+export const isInstanceOfShellBarItem = createInstanceChecker<ShellBarItem>("isShellBarItem");
 export type { ShellBarItemClickEventDetail, ShellBarItemAccessibilityAttributes };

packages/fiori/src/ShellBarTemplate.tsx

@@ -153,7 +153,7 @@
 						)}
 
 						{/* Custom Items */}
-						{this.items.map(item => (
+						{this._validItems.map(item => (
 							<div
 								key={item._id}
 								class={{
@@ -233,7 +233,7 @@
 				opener="ui5-shellbar-overflow-button"
 				placement="Bottom"
 				hideArrow={true}
 				horizontalAlign={this.popoverHorizontalAlign} // TODO: add test
 			>
 				<List separators="None" onClick={this.handleOverflowItemClick}>
 					{this.overflowItems.map(item => {