From 25515e38925f802cff0cd84abf29c4e7069e07b0 Mon Sep 17 00:00:00 2001
From: Ivanova Terzieva <nikoleta.ivanova.terzieva@sap.com>
Date: Tue, 14 Apr 2026 15:46:12 +0300
Subject: [PATCH 1/7] chore(ui5-combo-box): lazy loading and acc

---
 packages/main/test/pages/MultiComboBox.html | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/main/test/pages/MultiComboBox.html b/packages/main/test/pages/MultiComboBox.html
index f7fbd7899ab2..21c89a5dd824 100644
--- a/packages/main/test/pages/MultiComboBox.html
+++ b/packages/main/test/pages/MultiComboBox.html
@@ -580,9 +580,9 @@ <h3>MultiComboBox in Compact</h3>
 		<br />
 
 		<ui5-multi-combobox id="toggle-loading-mcb">
-			<ui5-mcb-item text="Item 1"></ui5-mcb-item>
+			<!-- <ui5-mcb-item text="Item 1"></ui5-mcb-item>
 			<ui5-mcb-item text="Item 2"></ui5-mcb-item>
-			<ui5-mcb-item text="Item 3"></ui5-mcb-item>
+			<ui5-mcb-item text="Item 3"></ui5-mcb-item> -->
 		</ui5-multi-combobox>
 		<br /><br />
 
@@ -891,8 +891,17 @@ <h3>MultiComboBox in Compact</h3>
 
 		document.getElementById("toggle-loading-btn").addEventListener("click", function () {
 			const mcb = document.getElementById("toggle-loading-mcb");
-			mcb.loading = !mcb.loading;
+			mcb.loading = true;
+			setTimeout(() => {
+				mcb.appendChild(document.createElement("ui5-mcb-item")).text = "New Item";
+				mcb.appendChild(document.createElement("ui5-mcb-item")).text = "New Item 2";
+				mcb.loading = false;
+				const invisibleMessage = window["sap-ui-webcomponents-bundle"].invisibleMessage;
+				invisibleMessage.announce("2 items available", "Assertive");
+			}, 2000);
 		});
+
+		
 	</script>
 
 </body>

From adb2070322a1fc05d8eaf44e6b2510319f4c3f83 Mon Sep 17 00:00:00 2001
From: Ivanova Terzieva <nikoleta.ivanova.terzieva@sap.com>
Date: Tue, 21 Apr 2026 10:36:49 +0300
Subject: [PATCH 2/7] chore(ui5-combobox): change sample of lazy loaded itrems

---
 packages/main/test/pages/ComboBox.html | 35 ++++++++++++++++++++------
 1 file changed, 28 insertions(+), 7 deletions(-)

diff --git a/packages/main/test/pages/ComboBox.html b/packages/main/test/pages/ComboBox.html
index e278ffc8c04d..d3d24aa4202f 100644
--- a/packages/main/test/pages/ComboBox.html
+++ b/packages/main/test/pages/ComboBox.html
@@ -197,11 +197,8 @@
 		<br />
 
 		<ui5-combobox id="toggle-loading-cb" class="combobox2auto">
-			<ui5-cb-item text="Item 1"></ui5-cb-item>
-			<ui5-cb-item text="Item 2"></ui5-cb-item>
-			<ui5-cb-item text="Item 3"></ui5-cb-item>
 		</ui5-combobox>
-		<ui5-button id="toggle-loading-btn">Toggle Loading</ui5-button>
+		<ui5-button id="btn-clear">Clear items</ui5-button>
 	</div>
 
 	<div class="demo-section">
@@ -637,9 +634,33 @@ <h3>ComboBox Composition</h3>
 			document.getElementById("combo").focus();
 		});
 
-		document.getElementById("toggle-loading-btn").addEventListener("click", function () {
-			const combo = document.getElementById("toggle-loading-cb");
-			combo.loading = !combo.loading;
+		const cbLazyLoad = document.getElementById("toggle-loading-cb"); 
+
+		document.getElementById("btn-clear").addEventListener("click", () => {
+			while (cbLazyLoad.firstChild) {
+				cbLazyLoad.removeChild(cbLazyLoad.firstChild);
+			}
+		});
+
+		const createItem = (cb, text) => {
+			const item = document.createElement("ui5-cb-item");
+			item.text = text;
+			cb.appendChild(item);
+		};
+
+		cbLazyLoad.addEventListener("open", (e) => {
+			if(!cbLazyLoad.items.length){
+				const invisibleMessage = window["sap-ui-webcomponents-bundle"].invisibleMessage;
+				cbLazyLoad.loading = true;
+				invisibleMessage.announce("Loading data", "Assertive");
+				createItem(cbLazyLoad, `Item 1`);
+				createItem(cbLazyLoad, `Item 2`);
+				createItem(cbLazyLoad, `Item 3`);
+				setTimeout(() => {
+					cbLazyLoad.loading = false;
+					invisibleMessage.announce("Data loaded. 3 results are available", "Assertive");
+				}, 3000);
+			}
 		});
 	</script>
 

From 8615f18433ed422264d8f9c07cb4dba9dea5ac10 Mon Sep 17 00:00:00 2001
From: Ivanova Terzieva <nikoleta.ivanova.terzieva@sap.com>
Date: Tue, 12 May 2026 09:34:08 +0300
Subject: [PATCH 3/7] chore(ui5-combobox): lazy loading

---
 packages/main/src/ComboBox.ts                 |  54 +++++++--
 packages/main/src/ComboBoxPopoverTemplate.tsx | 107 +++++++++---------
 .../main/src/i18n/messagebundle.properties    |  11 ++
 packages/main/test/pages/ComboBox.html        |  42 +++----
 4 files changed, 130 insertions(+), 84 deletions(-)

diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts
index 1152c6b5e14b..68c0ad011a2d 100644
--- a/packages/main/src/ComboBox.ts
+++ b/packages/main/src/ComboBox.ts
@@ -60,6 +60,10 @@ import {
 	COMBOBOX_AVAILABLE_OPTIONS,
 	COMBOBOX_DIALOG_OK_BUTTON,
 	COMBOBOX_DIALOG_CANCEL_BUTTON,
+	COMBOBOX_LOADING,
+	COMBOBOX_LOADED,
+	COMBOBOX_LOADED_ITEMS,
+	COMBOBOX_LOADED_ITEM,
 	SELECT_OPTIONS,
 	LIST_ITEM_POSITION,
 	LIST_ITEM_GROUP_HEADER,
@@ -499,6 +503,8 @@ class ComboBox extends UI5Element implements IFormInputElement {
 	icon!: Slot<IIcon>;
 
 	_initialRendering = true;
+	_prevLoading = false;
+	_announceLoading?: boolean | undefined;
 	_itemFocused = false;
 	// used only for Safari fix (check onAfterRendering)
 	_autocomplete = false;
@@ -594,6 +600,16 @@ class ComboBox extends UI5Element implements IFormInputElement {
 		});
 
 		this._selectMatchingItem();
+
+		if (!this._initialRendering) {
+			if (!this._prevLoading && this.loading) {
+				this._announceLoading = true;
+			} else if (this._prevLoading && !this.loading) {
+				this._announceLoading = false;
+			}
+		}
+
+		this._prevLoading = this.loading;
 		this._initialRendering = false;
 
 		this.style.setProperty("--_ui5-input-icons-count", `${this.iconsCount}`);
@@ -614,6 +630,23 @@ class ComboBox extends UI5Element implements IFormInputElement {
 
 		this.storeResponsivePopoverWidth();
 
+		if (this._announceLoading) {
+			announce(ComboBox.i18nBundle.getText(COMBOBOX_LOADING), InvisibleMessageMode.Polite);
+		} else if (this._announceLoading === false) {
+			let count = 0;
+			this._filteredItems.forEach(item => {
+				if (isInstanceOfComboBoxItemGroup(item)) {
+					count += item.items?.filter(i => i._isVisible).length || 0;
+				} else {
+					count++;
+				}
+			});
+
+			const itemsLoadedMessage = count === 1 ? ComboBox.i18nBundle.getText(COMBOBOX_LOADED_ITEM) : ComboBox.i18nBundle.getText(COMBOBOX_LOADED_ITEMS, count);
+			announce(`${ComboBox.i18nBundle.getText(COMBOBOX_LOADED)}. ${itemsLoadedMessage}`, InvisibleMessageMode.Polite);
+		}
+		this._announceLoading = undefined;
+
 		if (!arraysAreEqual(this._valueStateLinks, this.linksInAriaValueStateHiddenText)) {
 			this._removeLinksEventListeners();
 			this._addLinksEventListeners();
@@ -967,17 +1000,20 @@ class ComboBox extends UI5Element implements IFormInputElement {
 		}
 
 		const allItems = this._getItems();
-		const currentItem = allItems[indexOfItem];
-		const isLastItem = indexOfItem === allItems.length - 1;
 
-		// We don't want to navigate further if the current item is the last one and either is already focused or the popover is closed
-		if (isLastItem && ((isOpen && currentItem.focused) || !isOpen)) {
-			return;
-		}
+		if(allItems.length){
+			const currentItem = allItems[indexOfItem];
+			const isLastItem = indexOfItem === allItems.length - 1;
 
-		const itemIndexToBeFocused = isLastItem ? indexOfItem : indexOfItem + 1;
+			// We don't want to navigate further if the current item is the last one and either is already focused or the popover is closed
+			if (isLastItem && ((isOpen && currentItem.focused) || !isOpen)) {
+				return;
+			}
 
-		this._handleItemNavigation(e, itemIndexToBeFocused, true /* isForward */);
+			const itemIndexToBeFocused = isLastItem ? indexOfItem : indexOfItem + 1;
+
+			this._handleItemNavigation(e, itemIndexToBeFocused, true /* isForward */);
+		}
 	}
 
 	_handleArrowUp(e: KeyboardEvent, indexOfItem: number) {
@@ -1040,7 +1076,7 @@ class ComboBox extends UI5Element implements IFormInputElement {
 		this._autocomplete = !(isBackSpace(e) || isDelete(e));
 		this._isKeyNavigation = false;
 
-		if (isNavKey && !this.readonly && this._filteredItems.length) {
+		if (isNavKey && !this.readonly) {
 			this.handleNavKeyPress(e);
 		}
 
diff --git a/packages/main/src/ComboBoxPopoverTemplate.tsx b/packages/main/src/ComboBoxPopoverTemplate.tsx
index b4dd0ebcc93d..03e88f927f20 100644
--- a/packages/main/src/ComboBoxPopoverTemplate.tsx
+++ b/packages/main/src/ComboBoxPopoverTemplate.tsx
@@ -33,11 +33,7 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 				onKeyDown={this._handlePopoverKeydown}
 				onFocusOut={this._handlePopoverFocusout}
 			>
-				{this.loading &&
-					<BusyIndicator active={true} class="ui5-combobox-busy"/>
-				}
-
-				{!this.loading && this._isPhone &&
+				{this._isPhone &&
 				<>
 					<div slot="header" class="ui5-responsive-popover-header">
 						<div class="row">
@@ -61,7 +57,7 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 								onInput={this._handleMobileInput}
 								onChange={this._inputChange}
 							>
-								{ this._filteredItems.flatMap(item => {
+								{!this.loading && this._filteredItems.flatMap(item => {
 									if (item.isGroupItem && item.items) {
 										// For group items, return all nested items
 										return item.items
@@ -86,65 +82,66 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 				</>
 				}
 
-				{!this._isPhone && this.hasValueStateText &&
-				<div
-					slot="header"
-					class={{
-						"ui5-responsive-popover-header": true,
-						...this.classes.popoverValueState,
-					}}
-					style={this.styles.suggestionPopoverHeader}
-				>
-					<Icon class="ui5-input-value-state-message-icon" name={this._valueStateMessageIcon}/>
-					{ this.open && valueStateMessage.call(this) }
-				</div>
+				{!this._isPhone && !this.loading && this.hasValueStateText &&
+					<div
+						slot="header"
+						class={{
+							"ui5-responsive-popover-header": true,
+							...this.classes.popoverValueState,
+						}}
+						style={this.styles.suggestionPopoverHeader}
+					>
+						<Icon class="ui5-input-value-state-message-icon" name={this._valueStateMessageIcon}/>
+						{ this.open && valueStateMessage.call(this) }
+					</div>
 				}
 
+				{this.loading && <BusyIndicator active={true} class="ui5-combobox-busy"/>}
 				{!this.loading && !!this._filteredItems.length &&
-				<List
-					class="ui5-combobox-items-list"
-					separators="None"
-					accessibleRole="ListBox"
-					selectionMode="Single"
-					onItemClick={this._selectItem}
-					onItemFocused={this._onItemFocus}
-					onMouseDown={this._itemMousedown}
-				>
-					{ this._filteredItems.map(item => <slot name={item._individualSlot}></slot>)}
-				</List>
+					<List
+						class="ui5-combobox-items-list"
+						separators="None"
+						accessibleRole="ListBox"
+						selectionMode="Single"
+						onItemClick={this._selectItem}
+						onItemFocused={this._onItemFocus}
+						onMouseDown={this._itemMousedown}
+					>
+						{ this._filteredItems.map(item => <slot name={item._individualSlot}></slot>)}
+					</List>
 				}
 
 				{this._isPhone &&
-			<div slot="footer" class="ui5-responsive-popover-footer">
-				<Button
-					design="Emphasized"
-					onClick={this._closeRespPopover}
-				>{this._dialogOkButtonText}</Button>
-				<Button
-					class="ui5-responsive-popover-close-btn"
-					design="Transparent"
-					onClick={this._closeRespPopover}
-				>
-					{this._dialogCancelButtonText}
-				</Button>
-			</div>
+					<div slot="footer" class="ui5-responsive-popover-footer">
+						<Button
+							design="Emphasized"
+							onClick={this._closeRespPopover}
+						>{this._dialogOkButtonText}</Button>
+						<Button
+							class="ui5-responsive-popover-close-btn"
+							design="Transparent"
+							onClick={this._closeRespPopover}
+						>
+							{this._dialogCancelButtonText}
+						</Button>
+					</div>
 				}
 			</ResponsivePopover>
 
 			{this.shouldOpenValueStateMessagePopover &&
-		<Popover
-			preventFocusRestore={true}
-			preventInitialFocus={true}
-			hideArrow={true}
-			tabindex={-1}
-			class="ui5-valuestatemessage-popover"
-			horizontalAlign={PopoverHorizontalAlign.Start}
-			placement="Bottom"
-			opener={this}
-			open={this.valueStateOpen}
-			onClose={this._handleValueStatePopoverAfterClose}
-			onFocusOut={this._handleValueStatePopoverFocusout}
-		>
+				<Popover
+					preventFocusRestore={true}
+					preventInitialFocus={true}
+					hideArrow={true}
+					tabindex={-1}
+					class="ui5-valuestatemessage-popover"
+					horizontalAlign={PopoverHorizontalAlign.Start}
+					placement="Bottom"
+					opener={this}
+					open={this.valueStateOpen}
+					onClose={this._handleValueStatePopoverAfterClose}
+					onFocusOut={this._handleValueStatePopoverFocusout}
+				>
 			<div slot="header" class={this.classes.popoverValueState}>
 				<Icon class="ui5-input-value-state-message-icon" name={this._valueStateMessageIcon}/>
 				{ valueStateMessage.call(this) }
diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties
index d6f9bc6b3c89..097bf4d9ba18 100644
--- a/packages/main/src/i18n/messagebundle.properties
+++ b/packages/main/src/i18n/messagebundle.properties
@@ -444,6 +444,17 @@ MULTICOMBOBOX_DIALOG_CANCEL_BUTTON=Cancel
 #XACT: ARIA announcement for Combo Box and Multi Combo Box available options
 COMBOBOX_AVAILABLE_OPTIONS=Available Options
 
+#XACT: ARIA announcement when ComboBox starts loading items
+COMBOBOX_LOADING=Loading data
+
+#XACT: ARIA announcement when ComboBox ends loading items
+COMBOBOX_LOADED=Data loaded
+
+#XACT: ARIA announcement when ComboBox finishes loading, {0} is the number of loaded items
+COMBOBOX_LOADED_ITEMS={0} results are available
+
+COMBOBOX_LOADED_ITEM=1 result is available
+
 #XBUT: Combobox Dialog OK button on mobile devices
 COMBOBOX_DIALOG_OK_BUTTON=OK
 
diff --git a/packages/main/test/pages/ComboBox.html b/packages/main/test/pages/ComboBox.html
index a780e443f5a6..39a6f8263d59 100644
--- a/packages/main/test/pages/ComboBox.html
+++ b/packages/main/test/pages/ComboBox.html
@@ -515,7 +515,7 @@ <h3>ComboBox Composition</h3>
 	</div>
 
 	<script type="module">
-		document.getElementById("lazy").addEventListener("ui5-input", async event => {
+		document.getElementById("lazy").addEventListener("input", async event => {
 			const { value } = event.target;
 
 			// set busy state
@@ -526,26 +526,31 @@ <h3>ComboBox Composition</h3>
 			}
 
 			// load data
-			const items = (await (await fetch(`https://restcountries.com/v3.1/name/${value}`)).json());
-
-			// cleanup old items
-			while (document.getElementById("lazy").firstChild) {
-				document.getElementById("lazy").removeChild(document.getElementById("lazy").firstChild);
-			}
+			try {
+				while (document.getElementById("lazy").firstChild) {
+					document.getElementById("lazy").removeChild(document.getElementById("lazy").firstChild);
+				}
 
-			// fill new items
-			items.map(data => {
-				const element = document.createElement("ui5-cb-item");
-				element.setAttribute("text", data.name.common);
+				const response = await fetch(`https://restcountries.com/v3.1/name/${value}`);
+				const items = await response.json();
+				// cleanup old items
 
-				document.getElementById("lazy").appendChild(element);
-			});
+				// fill new items
+				if (Array.isArray(items)) {
+					items.map(data => {
+						const element = document.createElement("ui5-cb-item");
+						element.setAttribute("text", data.name.common);
 
-			// remove busy state
-			event.target.loading = false;
+						document.getElementById("lazy").appendChild(element);
+					});
+				}
+			} catch {
 
-			// load the items once or turn off filtering
-		}, { once: true });
+			} finally {
+				// remove busy state
+				event.target.loading = false;
+			}
+		});
 	</script>
 
 	<script type="module">
@@ -664,15 +669,12 @@ <h3>ComboBox Composition</h3>
 
 		cbLazyLoad.addEventListener("open", (e) => {
 			if(!cbLazyLoad.items.length){
-				const invisibleMessage = window["sap-ui-webcomponents-bundle"].invisibleMessage;
 				cbLazyLoad.loading = true;
-				invisibleMessage.announce("Loading data", "Assertive");
 				createItem(cbLazyLoad, `Item 1`);
 				createItem(cbLazyLoad, `Item 2`);
 				createItem(cbLazyLoad, `Item 3`);
 				setTimeout(() => {
 					cbLazyLoad.loading = false;
-					invisibleMessage.announce("Data loaded. 3 results are available", "Assertive");
 				}, 3000);
 			}
 		});

From 58feaeb0b2033765e93b51a16c63c75156461f41 Mon Sep 17 00:00:00 2001
From: Ivanova Terzieva <nikoleta.ivanova.terzieva@sap.com>
Date: Tue, 12 May 2026 16:02:29 +0300
Subject: [PATCH 4/7] chore(ui5-combobox): lazy loading improved interaction
 and accessibility

---
 packages/main/src/ComboBox.ts                 | 20 ++++-----
 packages/main/src/ComboBoxPopoverTemplate.tsx | 12 ++++--
 packages/main/src/themes/ComboBoxPopover.css  |  5 +++
 packages/main/test/pages/ComboBox.html        | 43 ++++++++++++-------
 4 files changed, 50 insertions(+), 30 deletions(-)

diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts
index 68c0ad011a2d..a06b79951bdf 100644
--- a/packages/main/src/ComboBox.ts
+++ b/packages/main/src/ComboBox.ts
@@ -1001,19 +1001,17 @@ class ComboBox extends UI5Element implements IFormInputElement {
 
 		const allItems = this._getItems();
 
-		if(allItems.length){
-			const currentItem = allItems[indexOfItem];
-			const isLastItem = indexOfItem === allItems.length - 1;
+		const currentItem = allItems[indexOfItem];
+		const isLastItem = indexOfItem === allItems.length - 1;
 
-			// We don't want to navigate further if the current item is the last one and either is already focused or the popover is closed
-			if (isLastItem && ((isOpen && currentItem.focused) || !isOpen)) {
-				return;
-			}
+		// We don't want to navigate further if the current item is the last one and either is already focused or the popover is closed
+		if (isLastItem && ((isOpen && currentItem.focused) || !isOpen)) {
+			return;
+		}
 
-			const itemIndexToBeFocused = isLastItem ? indexOfItem : indexOfItem + 1;
+		const itemIndexToBeFocused = isLastItem ? indexOfItem : indexOfItem + 1;
 
-			this._handleItemNavigation(e, itemIndexToBeFocused, true /* isForward */);
-		}
+		this._handleItemNavigation(e, itemIndexToBeFocused, true /* isForward */);
 	}
 
 	_handleArrowUp(e: KeyboardEvent, indexOfItem: number) {
@@ -1076,7 +1074,7 @@ class ComboBox extends UI5Element implements IFormInputElement {
 		this._autocomplete = !(isBackSpace(e) || isDelete(e));
 		this._isKeyNavigation = false;
 
-		if (isNavKey && !this.readonly) {
+		if (isNavKey && !this.readonly && allItems.length) {
 			this.handleNavKeyPress(e);
 		}
 
diff --git a/packages/main/src/ComboBoxPopoverTemplate.tsx b/packages/main/src/ComboBoxPopoverTemplate.tsx
index 03e88f927f20..a31c97678e5e 100644
--- a/packages/main/src/ComboBoxPopoverTemplate.tsx
+++ b/packages/main/src/ComboBoxPopoverTemplate.tsx
@@ -12,6 +12,8 @@ import generateHighlightedMarkupFirstMatch from "@ui5/webcomponents-base/dist/ut
 import type ComboBox from "./ComboBox.js";
 
 export default function ComboBoxPopoverTemplate(this: ComboBox) {
+	const loadingOnDesktopWithValueState = this.loading && !this._isPhone && this.hasValueStateText;
+	const loadingDelay = 100;
 	return (
 		<>
 			<ResponsivePopover
@@ -82,7 +84,7 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 				</>
 				}
 
-				{!this._isPhone && !this.loading && this.hasValueStateText &&
+				{!this._isPhone && this.hasValueStateText &&
 					<div
 						slot="header"
 						class={{
@@ -96,8 +98,8 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 					</div>
 				}
 
-				{this.loading && <BusyIndicator active={true} class="ui5-combobox-busy"/>}
-				{!this.loading && !!this._filteredItems.length &&
+				{(this._isPhone || !this.hasValueStateText) && this.loading && <BusyIndicator active={true} class="ui5-combobox-busy" delay={loadingDelay}/>}
+				{((!this.loading && !!this._filteredItems.length) || loadingOnDesktopWithValueState) &&
 					<List
 						class="ui5-combobox-items-list"
 						separators="None"
@@ -106,8 +108,10 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 						onItemClick={this._selectItem}
 						onItemFocused={this._onItemFocus}
 						onMouseDown={this._itemMousedown}
+						loading={loadingOnDesktopWithValueState}
+						loadingDelay={loadingDelay}
 					>
-						{ this._filteredItems.map(item => <slot name={item._individualSlot}></slot>)}
+						{this._filteredItems.map(item => <slot name={item._individualSlot}></slot>)}
 					</List>
 				}
 
diff --git a/packages/main/src/themes/ComboBoxPopover.css b/packages/main/src/themes/ComboBoxPopover.css
index 8e0921c82728..53b334765761 100644
--- a/packages/main/src/themes/ComboBoxPopover.css
+++ b/packages/main/src/themes/ComboBoxPopover.css
@@ -17,4 +17,9 @@
 
 [ui5-responsive-popover] [ui5-input] {
 	width: 100%;
+}
+
+
+.ui5-combobox-items-list[loading] {
+  	min-height: 1.6rem;
 }
\ No newline at end of file
diff --git a/packages/main/test/pages/ComboBox.html b/packages/main/test/pages/ComboBox.html
index 39a6f8263d59..03ac7f065f0c 100644
--- a/packages/main/test/pages/ComboBox.html
+++ b/packages/main/test/pages/ComboBox.html
@@ -196,7 +196,8 @@
 		<br />
 		<br />
 
-		<ui5-combobox id="toggle-loading-cb" class="combobox2auto">
+		<ui5-combobox id="toggle-loading-cb" class="combobox2auto" value-state="Negative">
+			<div slot="valueStateMessage">Custom error value state message.</div>
 		</ui5-combobox>
 		<ui5-button id="btn-clear">Clear items</ui5-button>
 	</div>
@@ -655,29 +656,41 @@ <h3>ComboBox Composition</h3>
 
 		const cbLazyLoad = document.getElementById("toggle-loading-cb"); 
 
-		document.getElementById("btn-clear").addEventListener("click", () => {
-			while (cbLazyLoad.firstChild) {
-				cbLazyLoad.removeChild(cbLazyLoad.firstChild);
-			}
-		});
-
 		const createItem = (cb, text) => {
 			const item = document.createElement("ui5-cb-item");
 			item.text = text;
 			cb.appendChild(item);
 		};
 
-		cbLazyLoad.addEventListener("open", (e) => {
-			if(!cbLazyLoad.items.length){
-				cbLazyLoad.loading = true;
-				createItem(cbLazyLoad, `Item 1`);
-				createItem(cbLazyLoad, `Item 2`);
-				createItem(cbLazyLoad, `Item 3`);
+		const fnClearItems = (control) => {
+			const itemSelector = "ui5-cb-item";
+			let allClear = control.querySelectorAll(itemSelector).length === 0;
+			while (!allClear) {
+				const child = control.querySelector(itemSelector);
+				control.removeChild(child);
+				allClear = control.querySelectorAll(itemSelector).length === 0;
+			}
+			control.value = "";
+		} 
+
+		const fnLoadItems = (control) => { 
+			const { value, items } = control;
+			if(!items || !items.length){
+				control.loading = true;
 				setTimeout(() => {
-					cbLazyLoad.loading = false;
+					createItem(control, `Item 1 ${value}`);
+					createItem(control, `Item 2 ${value}`);
+					createItem(control, `Item 3 ${value}`);
+					createItem(control, `Option ${value}`);
+					control.loading = false;
 				}, 3000);
 			}
-		});
+		};
+
+		document.getElementById("btn-clear").addEventListener("click", () => fnClearItems(cbLazyLoad));
+
+		cbLazyLoad.addEventListener("open", e => fnLoadItems(e.target));
+		cbLazyLoad.addEventListener("input", e => fnLoadItems(e.target));
 
 		document.getElementById("selected-value-cb").addEventListener("ui5-change", function (event) {
 			const combo = event.target;

From 82db69e0475f9f44062f8c78f0c08ee97edb79d9 Mon Sep 17 00:00:00 2001
From: Ivanova Terzieva <nikoleta.ivanova.terzieva@sap.com>
Date: Tue, 12 May 2026 23:42:54 +0300
Subject: [PATCH 5/7] chore(ui5-multi-combobox): lazy loading improved
 accessibility and interactions

---
 packages/main/src/ComboBox.ts                 | 18 +++-----
 packages/main/src/ComboBoxPopoverTemplate.tsx |  9 ++--
 packages/main/src/MultiComboBox.ts            | 29 ++++++++++++-
 .../main/src/MultiComboBoxPopoverTemplate.tsx | 43 +++++++++----------
 .../main/src/i18n/messagebundle.properties    | 13 ++++++
 packages/main/src/themes/ComboBoxPopover.css  |  2 +-
 .../main/src/themes/MultiComboBoxPopover.css  |  4 ++
 packages/main/test/pages/ComboBox.html        | 22 +++++++---
 packages/main/test/pages/MultiComboBox.html   |  7 +--
 9 files changed, 92 insertions(+), 55 deletions(-)

diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts
index a06b79951bdf..66e739aba617 100644
--- a/packages/main/src/ComboBox.ts
+++ b/packages/main/src/ComboBox.ts
@@ -503,8 +503,8 @@ class ComboBox extends UI5Element implements IFormInputElement {
 	icon!: Slot<IIcon>;
 
 	_initialRendering = true;
-	_prevLoading = false;
-	_announceLoading?: boolean | undefined;
+	_prevLoading: boolean;
+	_announceLoading?: boolean;
 	_itemFocused = false;
 	// used only for Safari fix (check onAfterRendering)
 	_autocomplete = false;
@@ -550,6 +550,7 @@ class ComboBox extends UI5Element implements IFormInputElement {
 
 		// when an initial value is set it should be considered as a _lastValue
 		this._lastValue = this.getAttribute("value") || "";
+		this._prevLoading = this.loading;
 	}
 
 	onBeforeRendering() {
@@ -633,15 +634,7 @@ class ComboBox extends UI5Element implements IFormInputElement {
 		if (this._announceLoading) {
 			announce(ComboBox.i18nBundle.getText(COMBOBOX_LOADING), InvisibleMessageMode.Polite);
 		} else if (this._announceLoading === false) {
-			let count = 0;
-			this._filteredItems.forEach(item => {
-				if (isInstanceOfComboBoxItemGroup(item)) {
-					count += item.items?.filter(i => i._isVisible).length || 0;
-				} else {
-					count++;
-				}
-			});
-
+			const count = this._getItems().filter(item => !item.isGroupItem && item._isVisible).length;
 			const itemsLoadedMessage = count === 1 ? ComboBox.i18nBundle.getText(COMBOBOX_LOADED_ITEM) : ComboBox.i18nBundle.getText(COMBOBOX_LOADED_ITEMS, count);
 			announce(`${ComboBox.i18nBundle.getText(COMBOBOX_LOADED)}. ${itemsLoadedMessage}`, InvisibleMessageMode.Polite);
 		}
@@ -1000,7 +993,6 @@ class ComboBox extends UI5Element implements IFormInputElement {
 		}
 
 		const allItems = this._getItems();
-
 		const currentItem = allItems[indexOfItem];
 		const isLastItem = indexOfItem === allItems.length - 1;
 
@@ -1074,7 +1066,7 @@ class ComboBox extends UI5Element implements IFormInputElement {
 		this._autocomplete = !(isBackSpace(e) || isDelete(e));
 		this._isKeyNavigation = false;
 
-		if (isNavKey && !this.readonly && allItems.length) {
+		if (isNavKey && !this.readonly && this._filteredItems.length) {
 			this.handleNavKeyPress(e);
 		}
 
diff --git a/packages/main/src/ComboBoxPopoverTemplate.tsx b/packages/main/src/ComboBoxPopoverTemplate.tsx
index a31c97678e5e..a4bd34a3f6a7 100644
--- a/packages/main/src/ComboBoxPopoverTemplate.tsx
+++ b/packages/main/src/ComboBoxPopoverTemplate.tsx
@@ -12,7 +12,7 @@ import generateHighlightedMarkupFirstMatch from "@ui5/webcomponents-base/dist/ut
 import type ComboBox from "./ComboBox.js";
 
 export default function ComboBoxPopoverTemplate(this: ComboBox) {
-	const loadingOnDesktopWithValueState = this.loading && !this._isPhone && this.hasValueStateText;
+	const loadingOnDesktopWithValueState = this.loading && !this._isPhone && this.hasValueState;
 	const loadingDelay = 100;
 	return (
 		<>
@@ -98,7 +98,7 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 					</div>
 				}
 
-				{(this._isPhone || !this.hasValueStateText) && this.loading && <BusyIndicator active={true} class="ui5-combobox-busy" delay={loadingDelay}/>}
+				{(this._isPhone || !this.hasValueState) && this.loading && <BusyIndicator active={true} class="ui5-combobox-busy" delay={loadingDelay}/>}
 				{((!this.loading && !!this._filteredItems.length) || loadingOnDesktopWithValueState) &&
 					<List
 						class="ui5-combobox-items-list"
@@ -108,10 +108,9 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 						onItemClick={this._selectItem}
 						onItemFocused={this._onItemFocus}
 						onMouseDown={this._itemMousedown}
-						loading={loadingOnDesktopWithValueState}
-						loadingDelay={loadingDelay}
 					>
-						{this._filteredItems.map(item => <slot name={item._individualSlot}></slot>)}
+						{loadingOnDesktopWithValueState && <BusyIndicator active={true} class="ui5-combobox-busy" delay={loadingDelay}/>}
+						{!this.loading && this._filteredItems.map(item => <slot name={item._individualSlot}></slot>)}
 					</List>
 				}
 
diff --git a/packages/main/src/MultiComboBox.ts b/packages/main/src/MultiComboBox.ts
index 5958de2b1311..b6c8cba63b3d 100644
--- a/packages/main/src/MultiComboBox.ts
+++ b/packages/main/src/MultiComboBox.ts
@@ -61,6 +61,8 @@ import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/In
 import MultiComboBoxItem, { isInstanceOfMultiComboBoxItem } from "./MultiComboBoxItem.js";
 import MultiComboBoxItemGroup, { isInstanceOfMultiComboBoxItemGroup } from "./MultiComboBoxItemGroup.js";
 import ListItemGroup from "./ListItemGroup.js";
+import InvisibleMessageMode from "@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js";
+import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js";
 import Tokenizer, { getTokensCountText } from "./Tokenizer.js";
 import type { TokenizerTokenDeleteEventDetail } from "./Tokenizer.js";
 import Token from "./Token.js";
@@ -97,6 +99,10 @@ import {
 	MCB_SELECTED_ITEMS,
 	INPUT_CLEAR_ICON_ACC_NAME,
 	FORM_MIXED_TEXTFIELD_REQUIRED,
+	MULTICOMBOBOX_LOADING,
+	MULTICOMBOBOX_LOADED,
+	MULTICOMBOBOX_LOADED_ITEMS,
+	MULTICOMBOBOX_LOADED_ITEM,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Templates
@@ -588,6 +594,8 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 	selectedItems: Array<IMultiComboBoxItem>;
 	_valueStateLinks: Array<HTMLElement>;
 	_composition?: InputComposition;
+	_prevLoading: boolean;
+	_announceLoading?: boolean;
 	_suppressNextLiveChange: boolean; // prevent unwanted live change events during IME composition
 	@i18n("@ui5/webcomponents")
 	static i18nBundle: I18nBundle;
@@ -641,6 +649,7 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 		this.currentItemIdx = -1;
 		this._valueStateLinks = [];
 		this._suppressNextLiveChange = false;
+		this._prevLoading = this.loading;
 	}
 
 	onEnterDOM() {
@@ -1842,6 +1851,13 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 		const autoCompletedChars = input && (input.selectionEnd || 0) - (input.selectionStart || 0);
 		const value = input && input.value;
 
+		if (!this._prevLoading && this.loading) {
+			this._announceLoading = true;
+		} else if (this._prevLoading && !this.loading) {
+			this._announceLoading = false;
+		}
+		this._prevLoading = this.loading;
+
 		if (this.open) {
 			const list = this._getList();
 			const selectedListItemsCount = this.items.filter(item => item.selected).length;
@@ -1911,6 +1927,15 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 			this._addLinksEventListeners();
 			this._valueStateLinks = this.linksInAriaValueStateHiddenText;
 		}
+
+		if (this._announceLoading) {
+			announce(MultiComboBox.i18nBundle.getText(MULTICOMBOBOX_LOADING), InvisibleMessageMode.Polite);
+		} else if (this._announceLoading === false) {
+			const count = this._getItems().filter(item => item._isVisible).length;
+			const itemsLoadedMessage = count === 1 ? MultiComboBox.i18nBundle.getText(MULTICOMBOBOX_LOADED_ITEM) : MultiComboBox.i18nBundle.getText(MULTICOMBOBOX_LOADED_ITEMS, count);
+			announce(`${MultiComboBox.i18nBundle.getText(MULTICOMBOBOX_LOADED)}. ${itemsLoadedMessage}`, InvisibleMessageMode.Polite);
+		}
+		this._announceLoading = undefined;
 	}
 
 	get _isPhone() {
@@ -2353,8 +2378,8 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 		const remSizeIxPx = parseInt(getComputedStyle(document.documentElement).fontSize);
 		return {
 			popoverValueStateMessage: {
-				"width": `${this._listWidth || 0}px`,
-				"display": this._listWidth === 0 ? "none" : "inline-block",
+				"width": this._listWidth ? `${this._listWidth}px` : "100%",
+				"display": "inline-block",
 			},
 			popoverHeader: {
 				"max-width": isPhone() ? "100%" : `22rem`,
diff --git a/packages/main/src/MultiComboBoxPopoverTemplate.tsx b/packages/main/src/MultiComboBoxPopoverTemplate.tsx
index 0393b075a1f3..3de3f1a9ea94 100644
--- a/packages/main/src/MultiComboBoxPopoverTemplate.tsx
+++ b/packages/main/src/MultiComboBoxPopoverTemplate.tsx
@@ -14,6 +14,8 @@ import Title from "./Title.js";
 import BusyIndicator from "./BusyIndicator.js";
 
 export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) {
+	const loadingDelay = 100;
+	const loadingOnDesktopWithValueState = this.loading && !this._isPhone && this.hasValueState;
 	return (<>
 		<ResponsivePopover
 			placement="Bottom"
@@ -33,11 +35,8 @@ export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) {
 			open={this.open}
 			opener={this}
 		>
-			{this.loading &&
-				<BusyIndicator active={true} class="ui5-multi-combobox-busy"/>
-			}
-
-			{!this.loading && this._isPhone && <>
+			{this._isPhone && 
+			<>
 				<div slot="header" class="ui5-responsive-popover-header" style={this.styles.popoverHeader}>
 					<div class="row">
 						<Title
@@ -72,34 +71,32 @@ export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) {
 							accessibleName={this._showSelectedButtonAccessibleNameText}
 						></ToggleButton>
 					</div>
-				</div>				{this.hasValueStateMessage &&
-					<div class={this.classes.popoverValueState} style={this.styles.popoverValueStateMessage}>
-						<Icon class="ui5-input-value-state-message-icon" name={this._valueStateMessageIcon}></Icon>
-						{this.open && valueStateMessage.call(this)}
-					</div>
-				}
-
-				{selectAllWrapper.call(this)}
-			</>}
-
-			{!this.loading && !this._isPhone && <>
+				</div>
 				{this.hasValueStateMessage &&
-					<div slot="header" onKeyDown={this._onListHeaderKeydown} class={this.classes.responsivePopoverHeaderValueState} style={this.styles.popoverValueStateMessage}>
+					<div class={this.classes.popoverValueState} style={this.styles.popoverValueStateMessage}>
 						<Icon class="ui5-input-value-state-message-icon" name={this._valueStateMessageIcon}></Icon>
 						{this.open && valueStateMessage.call(this)}
 					</div>
 				}
-
-				{selectAllWrapper.call(this)}
 			</>}
 
-			{!this.loading && this.filterSelected ?
+			{!this._isPhone && this.hasValueStateMessage &&
+				<div slot="header" onKeyDown={this._onListHeaderKeydown} class={this.classes.responsivePopoverHeaderValueState} style={this.styles.popoverValueStateMessage}>
+					<Icon class="ui5-input-value-state-message-icon" name={this._valueStateMessageIcon}></Icon>
+					{this.open && valueStateMessage.call(this)}
+				</div>
+			}
+			{selectAllWrapper.call(this)}
+			{(this._isPhone || !this.hasValueState) && this.loading && <BusyIndicator active={true} class="ui5-multi-combobox-busy" delay={loadingDelay}/>}
+			{((!this.loading && this.filterSelected ) || loadingOnDesktopWithValueState) ?
 				<List separators="None" selectionMode="Multiple" class="ui5-multi-combobox-all-items-list" accessibleRole="ListBox">
-					{this.selectedItems.map(item => <slot name={item._individualSlot}></slot>)}
+					{loadingOnDesktopWithValueState && <BusyIndicator active={true} class="ui5-multi-combobox-busy" delay={loadingDelay}/>}
+					{!this.loading && this.selectedItems.map(item => <slot name={item._individualSlot}></slot>)}
 				</List>
-				: !this.loading &&
+				: (!this.loading || loadingOnDesktopWithValueState) &&
 				<List separators="None" selectionMode="Multiple" class="ui5-multi-combobox-all-items-list" accessibleRole="ListBox" onKeyDown={this._onItemKeydown}>
-					{this._filteredItems.map(item => <slot name={item._individualSlot}></slot>)}
+					{loadingOnDesktopWithValueState && <BusyIndicator active={true} class="ui5-multi-combobox-busy" delay={loadingDelay}/>}
+					{!this.loading && this._filteredItems.map(item => <slot name={item._individualSlot}></slot>)}
 				</List>
 			}
 
diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties
index 097bf4d9ba18..1b369b0839a4 100644
--- a/packages/main/src/i18n/messagebundle.properties
+++ b/packages/main/src/i18n/messagebundle.properties
@@ -444,6 +444,18 @@ MULTICOMBOBOX_DIALOG_CANCEL_BUTTON=Cancel
 #XACT: ARIA announcement for Combo Box and Multi Combo Box available options
 COMBOBOX_AVAILABLE_OPTIONS=Available Options
 
+#XACT: ARIA announcement when MultiComboBox starts loading items
+MULTICOMBOBOX_LOADING=Loading data
+
+#XACT: ARIA announcement when MultiComboBox ends loading items
+MULTICOMBOBOX_LOADED=Data loaded
+
+#XACT: ARIA announcement when MultiComboBox finishes loading, {0} is the number of loaded items
+MULTICOMBOBOX_LOADED_ITEMS={0} results are available
+
+#XACT: ARIA announcement when MultiComboBox finishes loading and there is 1 item
+MULTICOMBOBOX_LOADED_ITEM=1 result is available
+
 #XACT: ARIA announcement when ComboBox starts loading items
 COMBOBOX_LOADING=Loading data
 
@@ -453,6 +465,7 @@ COMBOBOX_LOADED=Data loaded
 #XACT: ARIA announcement when ComboBox finishes loading, {0} is the number of loaded items
 COMBOBOX_LOADED_ITEMS={0} results are available
 
+#XACT: ARIA announcement when ComboBox finishes loading and there is 1 item
 COMBOBOX_LOADED_ITEM=1 result is available
 
 #XBUT: Combobox Dialog OK button on mobile devices
diff --git a/packages/main/src/themes/ComboBoxPopover.css b/packages/main/src/themes/ComboBoxPopover.css
index 53b334765761..b7a685c7b95d 100644
--- a/packages/main/src/themes/ComboBoxPopover.css
+++ b/packages/main/src/themes/ComboBoxPopover.css
@@ -20,6 +20,6 @@
 }
 
 
-.ui5-combobox-items-list[loading] {
+.ui5-combobox-items-list:has(.ui5-combobox-busy[active]) {
   	min-height: 1.6rem;
 }
\ No newline at end of file
diff --git a/packages/main/src/themes/MultiComboBoxPopover.css b/packages/main/src/themes/MultiComboBoxPopover.css
index 21115cc5c4a9..638ceefc7069 100644
--- a/packages/main/src/themes/MultiComboBoxPopover.css
+++ b/packages/main/src/themes/MultiComboBoxPopover.css
@@ -57,3 +57,7 @@
 [ui5-responsive-popover] [ui5-input] {
 	width: 100%;
 }
+
+.ui5-multi-combobox-all-items-list:has(.ui5-multi-combobox-busy[active]) {
+  	min-height: 1.6rem;
+}
diff --git a/packages/main/test/pages/ComboBox.html b/packages/main/test/pages/ComboBox.html
index 03ac7f065f0c..9a66281d2222 100644
--- a/packages/main/test/pages/ComboBox.html
+++ b/packages/main/test/pages/ComboBox.html
@@ -191,7 +191,7 @@
 	</div>
 
 	<div class="demo-section">
-		<span>Toggle Loading State</span>
+		<span>Loading State</span>
 
 		<br />
 		<br />
@@ -662,8 +662,15 @@ <h3>ComboBox Composition</h3>
 			cb.appendChild(item);
 		};
 
+		const createGroupItem = (cb, text) => {
+			const item = document.createElement("ui5-cb-item-group");
+			item.headerText = text;
+			cb.appendChild(item);
+			return item;
+		}
+
 		const fnClearItems = (control) => {
-			const itemSelector = "ui5-cb-item";
+			const itemSelector = "ui5-cb-item, ui5-cb-item-group";
 			let allClear = control.querySelectorAll(itemSelector).length === 0;
 			while (!allClear) {
 				const child = control.querySelector(itemSelector);
@@ -678,10 +685,13 @@ <h3>ComboBox Composition</h3>
 			if(!items || !items.length){
 				control.loading = true;
 				setTimeout(() => {
-					createItem(control, `Item 1 ${value}`);
-					createItem(control, `Item 2 ${value}`);
-					createItem(control, `Item 3 ${value}`);
-					createItem(control, `Option ${value}`);
+					const group = createGroupItem(control, 'Group 1');
+					createItem(group, `Child Item 1 ${value}`);
+					createItem(group, `Chidl Item 2 ${value}`);
+					// createItem(control, `Item 1 ${value}`);
+					// createItem(control, `Item 2 ${value}`);
+					// createItem(control, `Item 3 ${value}`);
+					// createItem(control, `Option ${value}`);
 					control.loading = false;
 				}, 3000);
 			}
diff --git a/packages/main/test/pages/MultiComboBox.html b/packages/main/test/pages/MultiComboBox.html
index 4b65bb4d1d34..27c021cae6de 100644
--- a/packages/main/test/pages/MultiComboBox.html
+++ b/packages/main/test/pages/MultiComboBox.html
@@ -579,10 +579,7 @@ <h3>MultiComboBox in Compact</h3>
 		<br />
 		<br />
 
-		<ui5-multi-combobox id="toggle-loading-mcb">
-			<!-- <ui5-mcb-item text="Item 1"></ui5-mcb-item>
-			<ui5-mcb-item text="Item 2"></ui5-mcb-item>
-			<ui5-mcb-item text="Item 3"></ui5-mcb-item> -->
+		<ui5-multi-combobox id="toggle-loading-mcb" value-state="Negative">
 		</ui5-multi-combobox>
 		<br /><br />
 
@@ -898,7 +895,7 @@ <h3>MultiComboBox in Compact</h3>
 				mcb.loading = false;
 				const invisibleMessage = window["sap-ui-webcomponents-bundle"].invisibleMessage;
 				invisibleMessage.announce("2 items available", "Assertive");
-			}, 2000);
+			}, 3000);
 		});
 
 		

From 6c6d8630e846362b2cbf2aae341f237fe55af7ef Mon Sep 17 00:00:00 2001
From: Ivanova Terzieva <nikoleta.ivanova.terzieva@sap.com>
Date: Wed, 20 May 2026 13:17:22 +0300
Subject: [PATCH 6/7] feat(ui5-multi-combobox): lazy loading accessibility

---
 packages/main/src/MultiComboBox.ts            | 23 +++++++++++++++++-
 .../main/src/MultiComboBoxPopoverTemplate.tsx | 24 ++++++++++++-------
 packages/main/test/pages/MultiComboBox.html   | 21 +++++++---------
 3 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/packages/main/src/MultiComboBox.ts b/packages/main/src/MultiComboBox.ts
index b6c8cba63b3d..13ecf1d0e2d2 100644
--- a/packages/main/src/MultiComboBox.ts
+++ b/packages/main/src/MultiComboBox.ts
@@ -152,6 +152,10 @@ type MultiComboBoxValueStateChangeEventDetail = {
 	valueState: `${ValueState}`,
 }
 
+type MultiComboBoxLoadingStart = {
+	shouldOpenPicker: boolean;
+}
+
 /**
  * @class
  *
@@ -266,6 +270,13 @@ type MultiComboBoxValueStateChangeEventDetail = {
 	cancelable: true,
 })
 
+/*
+ * @public
+ */
+@event("load-started", {
+	bubbles: true,
+})
+
 /**
  * Fired before the value state of the component is updated internally.
  * The event is preventable, meaning that if it's default action is
@@ -285,6 +296,7 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 		input: void,
 		open: void,
 		close: void,
+		"load-started": MultiComboBoxLoadingStart,
 		"selection-change": MultiComboBoxSelectionChangeEventDetail,
 		"value-state-change": MultiComboBoxValueStateChangeEventDetail,
 	}
@@ -728,6 +740,9 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 	}
 
 	togglePopoverByDropdownIcon() {
+		if (!this.open && !this.loading && this._getItems().length === 0 ) {
+			this.fireDecoratorEvent("load-started", {shouldOpenPicker: false});
+		}
 		this._shouldFilterItems = false;
 		this.open = !this.open;
 		this.tokenizerOpen = false;
@@ -763,6 +778,8 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 			return;
 		}
 
+		this.fireDecoratorEvent("load-started",  {shouldOpenPicker: true});
+
 		const input = e.target as HTMLInputElement;
 		const value: string = input.value;
 		const filteredItems: Array<IMultiComboBoxItem> = this._filterItems(value);
@@ -801,7 +818,7 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 		this.value = input.value;
 		this._filteredItems = filteredItems;
 
-		if (!isPhone()) {
+		if (!isPhone() && !this.loading) {
 			if (filteredItems.length === 0) {
 				this.open = false;
 			} else {
@@ -1697,6 +1714,9 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 	_click() {
 		if (isPhone() && !this.readonly && !this._showMorePressed && !this._deleting) {
 			this.open = true;
+			if (this._getItems().length === 0) {
+				this.fireDecoratorEvent("load-started", { shouldOpenPicker: true });
+			}
 		}
 
 		this._showMorePressed = false;
@@ -2398,6 +2418,7 @@ export default MultiComboBox;
 
 export type {
 	IMultiComboBoxItem,
+	MultiComboBoxLoadingStart,
 	MultiComboBoxSelectionChangeEventDetail,
 	MultiComboBoxValueStateChangeEventDetail,
 };
diff --git a/packages/main/src/MultiComboBoxPopoverTemplate.tsx b/packages/main/src/MultiComboBoxPopoverTemplate.tsx
index 3de3f1a9ea94..fb870737894a 100644
--- a/packages/main/src/MultiComboBoxPopoverTemplate.tsx
+++ b/packages/main/src/MultiComboBoxPopoverTemplate.tsx
@@ -86,18 +86,24 @@ export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) {
 					{this.open && valueStateMessage.call(this)}
 				</div>
 			}
+			{this.loading && (this._isPhone || !this.hasValueState) && <BusyIndicator active={true} class="ui5-multi-combobox-busy" delay={loadingDelay}/>}
 			{selectAllWrapper.call(this)}
-			{(this._isPhone || !this.hasValueState) && this.loading && <BusyIndicator active={true} class="ui5-multi-combobox-busy" delay={loadingDelay}/>}
 			{((!this.loading && this.filterSelected ) || loadingOnDesktopWithValueState) ?
-				<List separators="None" selectionMode="Multiple" class="ui5-multi-combobox-all-items-list" accessibleRole="ListBox">
-					{loadingOnDesktopWithValueState && <BusyIndicator active={true} class="ui5-multi-combobox-busy" delay={loadingDelay}/>}
-					{!this.loading && this.selectedItems.map(item => <slot name={item._individualSlot}></slot>)}
-				</List>
+				<>
+					
+					<List separators="None" selectionMode="Multiple" class="ui5-multi-combobox-all-items-list" accessibleRole="ListBox">
+						{loadingOnDesktopWithValueState && <BusyIndicator active={true} class="ui5-multi-combobox-busy" delay={loadingDelay}/>}
+						{!this.loading && this.selectedItems.map(item => <slot name={item._individualSlot}></slot>)}
+					</List>
+				</>
 				: (!this.loading || loadingOnDesktopWithValueState) &&
-				<List separators="None" selectionMode="Multiple" class="ui5-multi-combobox-all-items-list" accessibleRole="ListBox" onKeyDown={this._onItemKeydown}>
-					{loadingOnDesktopWithValueState && <BusyIndicator active={true} class="ui5-multi-combobox-busy" delay={loadingDelay}/>}
-					{!this.loading && this._filteredItems.map(item => <slot name={item._individualSlot}></slot>)}
-				</List>
+					<>
+					{selectAllWrapper.call(this)}
+					<List separators="None" selectionMode="Multiple" class="ui5-multi-combobox-all-items-list" accessibleRole="ListBox" onKeyDown={this._onItemKeydown}>
+						{loadingOnDesktopWithValueState && <BusyIndicator active={true} class="ui5-multi-combobox-busy" delay={loadingDelay}/>}
+						{!this.loading && this._filteredItems.map(item => <slot name={item._individualSlot}></slot>)}
+					</List>
+				</>
 			}
 
 			{this._isPhone &&
diff --git a/packages/main/test/pages/MultiComboBox.html b/packages/main/test/pages/MultiComboBox.html
index 27c021cae6de..94716a281abe 100644
--- a/packages/main/test/pages/MultiComboBox.html
+++ b/packages/main/test/pages/MultiComboBox.html
@@ -575,15 +575,13 @@ <h3>MultiComboBox in Compact</h3>
 	</div>
 
 	<div class="demo-section">
-		<ui5-label>Toggle Loading State:</ui5-label>
+		<ui5-label>Loading State:</ui5-label>
 		<br />
 		<br />
 
-		<ui5-multi-combobox id="toggle-loading-mcb" value-state="Negative">
+		<ui5-multi-combobox id="toggle-loading-mcb"  show-select-all>
 		</ui5-multi-combobox>
 		<br /><br />
-
-		<ui5-button id="toggle-loading-btn">Toggle Loading</ui5-button>
 	</div>
 
 	<div class="demo-section">
@@ -886,15 +884,14 @@ <h3>MultiComboBox in Compact</h3>
 			document.getElementById("mcb-form-submit").textContent = ++submitCounter;
 		});
 
-		document.getElementById("toggle-loading-btn").addEventListener("click", function () {
-			const mcb = document.getElementById("toggle-loading-mcb");
-			mcb.loading = true;
+		document.getElementById("toggle-loading-mcb").addEventListener("load-started", (e) => {
+			const mcbControl = e.target;
+			mcbControl.loading = true;
+			mcbControl.open = e.detail.shouldOpenPicker;
 			setTimeout(() => {
-				mcb.appendChild(document.createElement("ui5-mcb-item")).text = "New Item";
-				mcb.appendChild(document.createElement("ui5-mcb-item")).text = "New Item 2";
-				mcb.loading = false;
-				const invisibleMessage = window["sap-ui-webcomponents-bundle"].invisibleMessage;
-				invisibleMessage.announce("2 items available", "Assertive");
+				mcbControl.appendChild(document.createElement("ui5-mcb-item")).text = "New Item";
+				mcbControl.appendChild(document.createElement("ui5-mcb-item")).text = "New Item 2";
+				mcbControl.loading = false;
 			}, 3000);
 		});
 

From ca62a1472e5c8e7994a07b09693258cbf023348f Mon Sep 17 00:00:00 2001
From: Ivanova Terzieva <nikoleta.ivanova.terzieva@sap.com>
Date: Fri, 22 May 2026 10:54:38 +0300
Subject: [PATCH 7/7] feat(ui5-multi-combobox): fire event when a lazy load can
 be triggered

---
 packages/main/src/ComboBoxPopoverTemplate.tsx | 106 +++++-----
 packages/main/src/MultiComboBox.ts            |  10 +-
 .../main/src/MultiComboBoxPopoverTemplate.tsx | 187 ++++++++++--------
 3 files changed, 161 insertions(+), 142 deletions(-)

diff --git a/packages/main/src/ComboBoxPopoverTemplate.tsx b/packages/main/src/ComboBoxPopoverTemplate.tsx
index a4bd34a3f6a7..61cebaf5a033 100644
--- a/packages/main/src/ComboBoxPopoverTemplate.tsx
+++ b/packages/main/src/ComboBoxPopoverTemplate.tsx
@@ -36,52 +36,52 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 				onFocusOut={this._handlePopoverFocusout}
 			>
 				{this._isPhone &&
-				<>
-					<div slot="header" class="ui5-responsive-popover-header">
-						<div class="row">
-							<Title
-								level="H1"
-								wrappingType="None"
-								class="ui5-responsive-popover-header-text"
-							>
-								{this._headerTitleText}
-							</Title>
-						</div>
+					<>
+						<div slot="header" class="ui5-responsive-popover-header">
+							<div class="row">
+								<Title
+									level="H1"
+									wrappingType="None"
+									class="ui5-responsive-popover-header-text"
+								>
+									{this._headerTitleText}
+								</Title>
+							</div>
 
-						<div class="row">
-							<Input
-								open={this.openOnMobile}
-								placeholder={this.placeholder}
-								valueState={this.valueState}
-								showClearIcon={this.showClearIcon}
-								noTypeahead={this.noTypeahead}
-								onKeyDown={this._handleMobileKeydown}
-								onInput={this._handleMobileInput}
-								onChange={this._inputChange}
-							>
-								{!this.loading && this._filteredItems.flatMap(item => {
-									if (item.isGroupItem && item.items) {
-										// For group items, return all nested items
-										return item.items
-											.filter(nestedItem => !!nestedItem)
-											.map(nestedItem =>
-												<SuggestionItem text={nestedItem.text} additional-text={nestedItem.additionalText} markupText={generateHighlightedMarkupFirstMatch(nestedItem.text || "", this.filterValue)}/>
-											);
-									}
-									// For regular items
-									return <SuggestionItem text={item.text} additional-text={item.additionalText} markupText={generateHighlightedMarkupFirstMatch(item.text || "", this.filterValue)}/>;
-								})}
-							</Input>
+							<div class="row">
+								<Input
+									open={this.openOnMobile}
+									placeholder={this.placeholder}
+									valueState={this.valueState}
+									showClearIcon={this.showClearIcon}
+									noTypeahead={this.noTypeahead}
+									onKeyDown={this._handleMobileKeydown}
+									onInput={this._handleMobileInput}
+									onChange={this._inputChange}
+								>
+									{!this.loading && this._filteredItems.flatMap(item => {
+										if (item.isGroupItem && item.items) {
+											// For group items, return all nested items
+											return item.items
+												.filter(nestedItem => !!nestedItem)
+												.map(nestedItem =>
+													<SuggestionItem text={nestedItem.text} additional-text={nestedItem.additionalText} markupText={generateHighlightedMarkupFirstMatch(nestedItem.text || "", this.filterValue)} />
+												);
+										}
+										// For regular items
+										return <SuggestionItem text={item.text} additional-text={item.additionalText} markupText={generateHighlightedMarkupFirstMatch(item.text || "", this.filterValue)} />;
+									})}
+								</Input>
+							</div>
 						</div>
-					</div>
 
-					{this.hasValueStateText &&
-					<div class={this.classes.popoverValueState} style={this.styles.popoverValueStateMessage}>
-						<Icon class="ui5-input-value-state-message-icon" name={this._valueStateMessageIcon}/>
-						{ this.open && valueStateMessage.call(this) }
-					</div>
-					}
-				</>
+						{this.hasValueStateText &&
+							<div class={this.classes.popoverValueState} style={this.styles.popoverValueStateMessage}>
+								<Icon class="ui5-input-value-state-message-icon" name={this._valueStateMessageIcon} />
+								{this.open && valueStateMessage.call(this)}
+							</div>
+						}
+					</>
 				}
 
 				{!this._isPhone && this.hasValueStateText &&
@@ -93,12 +93,12 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 						}}
 						style={this.styles.suggestionPopoverHeader}
 					>
-						<Icon class="ui5-input-value-state-message-icon" name={this._valueStateMessageIcon}/>
-						{ this.open && valueStateMessage.call(this) }
+						<Icon class="ui5-input-value-state-message-icon" name={this._valueStateMessageIcon} />
+						{this.open && valueStateMessage.call(this)}
 					</div>
 				}
 
-				{(this._isPhone || !this.hasValueState) && this.loading && <BusyIndicator active={true} class="ui5-combobox-busy" delay={loadingDelay}/>}
+				{(this._isPhone || !this.hasValueState) && this.loading && <BusyIndicator active={true} class="ui5-combobox-busy" delay={loadingDelay} />}
 				{((!this.loading && !!this._filteredItems.length) || loadingOnDesktopWithValueState) &&
 					<List
 						class="ui5-combobox-items-list"
@@ -109,7 +109,7 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 						onItemFocused={this._onItemFocus}
 						onMouseDown={this._itemMousedown}
 					>
-						{loadingOnDesktopWithValueState && <BusyIndicator active={true} class="ui5-combobox-busy" delay={loadingDelay}/>}
+						{loadingOnDesktopWithValueState && <BusyIndicator active={true} class="ui5-combobox-busy" delay={loadingDelay} />}
 						{!this.loading && this._filteredItems.map(item => <slot name={item._individualSlot}></slot>)}
 					</List>
 				}
@@ -145,11 +145,11 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 					onClose={this._handleValueStatePopoverAfterClose}
 					onFocusOut={this._handleValueStatePopoverFocusout}
 				>
-			<div slot="header" class={this.classes.popoverValueState}>
-				<Icon class="ui5-input-value-state-message-icon" name={this._valueStateMessageIcon}/>
-				{ valueStateMessage.call(this) }
-			</div>
-		</Popover>
+					<div slot="header" class={this.classes.popoverValueState}>
+						<Icon class="ui5-input-value-state-message-icon" name={this._valueStateMessageIcon} />
+						{valueStateMessage.call(this)}
+					</div>
+				</Popover>
 			}
 		</>
 	);
@@ -158,7 +158,7 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 function valueStateMessage(this: ComboBox) {
 	return (
 		<>
-			{ this.shouldDisplayDefaultValueStateMessage ? this.valueStateDefaultText : <slot name="valueStateMessage"></slot> }
+			{this.shouldDisplayDefaultValueStateMessage ? this.valueStateDefaultText : <slot name="valueStateMessage"></slot>}
 		</>
 	);
 }
diff --git a/packages/main/src/MultiComboBox.ts b/packages/main/src/MultiComboBox.ts
index 1d000456f1f2..4383e77a6dd1 100644
--- a/packages/main/src/MultiComboBox.ts
+++ b/packages/main/src/MultiComboBox.ts
@@ -743,8 +743,8 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 	}
 
 	togglePopoverByDropdownIcon() {
-		if (!this.open && !this.loading && this._getItems().length === 0 ) {
-			this.fireDecoratorEvent("load-started", {shouldOpenPicker: false});
+		if (!this.open && !this.loading && this._getItems().length === 0) {
+			this.fireDecoratorEvent("load-started", { shouldOpenPicker: false });
 		}
 		this._shouldFilterItems = false;
 		this.open = !this.open;
@@ -781,7 +781,7 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 			return;
 		}
 
-		this.fireDecoratorEvent("load-started",  {shouldOpenPicker: true});
+		this.fireDecoratorEvent("load-started", { shouldOpenPicker: true });
 
 		const input = e.target as HTMLInputElement;
 		const value: string = input.value;
@@ -1241,6 +1241,10 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 	}
 
 	_onItemKeydown(e: KeyboardEvent) {
+		if (this.filterSelected) {
+			return;
+		}
+
 		const isFirstItemGroup = this.list?.getSlottedNodes<IMultiComboBoxItem>("items")[1] === e.target && this.list?.getSlottedNodes<IMultiComboBoxItem>("items")[0].hasAttribute("ui5-li-group");
 		const isFirstItem = this.list?.getSlottedNodes<IMultiComboBoxItem>("items")[0] === e.target || isFirstItemGroup;
 		const isArrowUp = isUp(e) || isUpCtrl(e);
diff --git a/packages/main/src/MultiComboBoxPopoverTemplate.tsx b/packages/main/src/MultiComboBoxPopoverTemplate.tsx
index fb870737894a..a630b8892145 100644
--- a/packages/main/src/MultiComboBoxPopoverTemplate.tsx
+++ b/packages/main/src/MultiComboBoxPopoverTemplate.tsx
@@ -13,9 +13,9 @@ import CheckBox from "./CheckBox.js";
 import Title from "./Title.js";
 import BusyIndicator from "./BusyIndicator.js";
 
+const LOADING_DELAY = 100;
+
 export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) {
-	const loadingDelay = 100;
-	const loadingOnDesktopWithValueState = this.loading && !this._isPhone && this.hasValueState;
 	return (<>
 		<ResponsivePopover
 			placement="Bottom"
@@ -35,92 +35,13 @@ export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) {
 			open={this.open}
 			opener={this}
 		>
-			{this._isPhone && 
-			<>
-				<div slot="header" class="ui5-responsive-popover-header" style={this.styles.popoverHeader}>
-					<div class="row">
-						<Title
-							level="H1"
-							wrappingType="None"
-							class="ui5-responsive-popover-header-text"
-						>
-							{this._headerTitleText}
-						</Title>
-					</div>
-					<div class="row">
-						<Input
-							onInput={this._handleMobileInput}
-							onKeyDown={this._onMobileInputKeydown}
-							placeholder={this.placeholder}
-							valueState={this._dialogInputValueState}
-							showClearIcon={this.showClearIcon}
-							noTypeahead={this.noTypeahead}
-						>
-							{this._filteredItems.map(item => (
-								<SuggestionItem text={item.text} additionalText={item.additionalText}></SuggestionItem>
-							))}
-						</Input>
-						<ToggleButton
-							slot="header"
-							class="ui5-multi-combobox-toggle-button"
-							icon={multiSelectAll}
-							design="Transparent"
-							pressed={this._showAllItemsButtonPressed}
-							disabled={this._getSelectedItems().length === 0}
-							onClick={this.filterSelectedItems}
-							accessibleName={this._showSelectedButtonAccessibleNameText}
-						></ToggleButton>
-					</div>
-				</div>
-				{this.hasValueStateMessage &&
-					<div class={this.classes.popoverValueState} style={this.styles.popoverValueStateMessage}>
-						<Icon class="ui5-input-value-state-message-icon" name={this._valueStateMessageIcon}></Icon>
-						{this.open && valueStateMessage.call(this)}
-					</div>
-				}
-			</>}
+			{this._isPhone && dialogHeader.call(this)}
 
-			{!this._isPhone && this.hasValueStateMessage &&
-				<div slot="header" onKeyDown={this._onListHeaderKeydown} class={this.classes.responsivePopoverHeaderValueState} style={this.styles.popoverValueStateMessage}>
-					<Icon class="ui5-input-value-state-message-icon" name={this._valueStateMessageIcon}></Icon>
-					{this.open && valueStateMessage.call(this)}
-				</div>
-			}
-			{this.loading && (this._isPhone || !this.hasValueState) && <BusyIndicator active={true} class="ui5-multi-combobox-busy" delay={loadingDelay}/>}
-			{selectAllWrapper.call(this)}
-			{((!this.loading && this.filterSelected ) || loadingOnDesktopWithValueState) ?
-				<>
-					
-					<List separators="None" selectionMode="Multiple" class="ui5-multi-combobox-all-items-list" accessibleRole="ListBox">
-						{loadingOnDesktopWithValueState && <BusyIndicator active={true} class="ui5-multi-combobox-busy" delay={loadingDelay}/>}
-						{!this.loading && this.selectedItems.map(item => <slot name={item._individualSlot}></slot>)}
-					</List>
-				</>
-				: (!this.loading || loadingOnDesktopWithValueState) &&
-					<>
-					{selectAllWrapper.call(this)}
-					<List separators="None" selectionMode="Multiple" class="ui5-multi-combobox-all-items-list" accessibleRole="ListBox" onKeyDown={this._onItemKeydown}>
-						{loadingOnDesktopWithValueState && <BusyIndicator active={true} class="ui5-multi-combobox-busy" delay={loadingDelay}/>}
-						{!this.loading && this._filteredItems.map(item => <slot name={item._individualSlot}></slot>)}
-					</List>
-				</>
-			}
+			{!this._isPhone && popoverHeader.call(this)}
 
-			{this._isPhone &&
-				<div slot="footer" class="ui5-responsive-popover-footer">
-					<Button
-						design="Emphasized"
-						onClick={this.handleOK}
-					>{this._dialogOkButton}</Button>
-					<Button
-						class="ui5-responsive-popover-close-btn"
-						design="Transparent"
-						onClick={this.handleCancel}
-					>
-						{this._dialogCancelButton}
-					</Button>
-				</div>
-			}
+			{popoverContent.call(this)}
+
+			{this._isPhone && dialogFooter.call(this)}
 		</ResponsivePopover>
 
 		{this.hasValueStateMessage &&
@@ -164,3 +85,97 @@ function selectAllWrapper(this: MultiComboBox) {
 		);
 	}
 }
+
+function dialogHeader(this: MultiComboBox) {
+	return <>
+		<div slot="header" class="ui5-responsive-popover-header" style={this.styles.popoverHeader}>
+			<div class="row">
+				<Title
+					level="H1"
+					wrappingType="None"
+					class="ui5-responsive-popover-header-text"
+				>
+					{this._headerTitleText}
+				</Title>
+			</div>
+			<div class="row">
+				<Input
+					onInput={this._handleMobileInput}
+					onKeyDown={this._onMobileInputKeydown}
+					placeholder={this.placeholder}
+					valueState={this._dialogInputValueState}
+					showClearIcon={this.showClearIcon}
+					noTypeahead={this.noTypeahead}
+				>
+					{this._filteredItems.map(item => (
+						<SuggestionItem text={item.text} additionalText={item.additionalText}></SuggestionItem>
+					))}
+				</Input>
+				<ToggleButton
+					slot="header"
+					class="ui5-multi-combobox-toggle-button"
+					icon={multiSelectAll}
+					design="Transparent"
+					pressed={this._showAllItemsButtonPressed}
+					disabled={this._getSelectedItems().length === 0}
+					onClick={this.filterSelectedItems}
+					accessibleName={this._showSelectedButtonAccessibleNameText}
+				></ToggleButton>
+			</div>
+		</div>
+		{this.hasValueStateMessage &&
+			<div class={this.classes.popoverValueState} style={this.styles.popoverValueStateMessage}>
+				<Icon class="ui5-input-value-state-message-icon" name={this._valueStateMessageIcon}></Icon>
+				{this.open && valueStateMessage.call(this)}
+			</div>
+		}
+	</>;
+}
+
+function popoverHeader(this: MultiComboBox) {
+	return this.hasValueStateMessage &&
+		<div slot="header" onKeyDown={this._onListHeaderKeydown} class={this.classes.responsivePopoverHeaderValueState} style={this.styles.popoverValueStateMessage}>
+			<Icon class="ui5-input-value-state-message-icon" name={this._valueStateMessageIcon}></Icon>
+			{this.open && valueStateMessage.call(this)}
+		</div>;
+}
+
+function dialogFooter(this: MultiComboBox) {
+	return <>
+		<div slot="footer" class="ui5-responsive-popover-footer">
+			<Button
+				design="Emphasized"
+				onClick={this.handleOK}
+			>{this._dialogOkButton}</Button>
+			<Button
+				class="ui5-responsive-popover-close-btn"
+				design="Transparent"
+				onClick={this.handleCancel}
+			>
+				{this._dialogCancelButton}
+			</Button>
+		</div>
+	</>;
+}
+
+function popoverContent(this: MultiComboBox) {
+	if (this.loading && (this._isPhone || !this.hasValueState)) {
+		return <BusyIndicator active={true} class="ui5-multi-combobox-busy" delay={LOADING_DELAY} />;
+	}
+
+	return <>
+		{!this.loading && selectAllWrapper.call(this)}
+		<List separators="None"
+			selectionMode="Multiple"
+			class="ui5-multi-combobox-all-items-list"
+			accessibleRole="ListBox"
+			onKeyDown={this._onItemKeydown}>
+			{this.loading && !this._isPhone && this.hasValueState && <BusyIndicator active={true} class="ui5-multi-combobox-busy" delay={LOADING_DELAY} />}
+			{!this.loading &&
+				(this.filterSelected
+					? this.selectedItems.map(item => <slot name={item._individualSlot}></slot>)
+					: this._filteredItems.map(item => <slot name={item._individualSlot}></slot>)
+				)}
+		</List>
+	</>;
+}