From 1b42b159ecfca6035530610b0e7d1649696a4eed Mon Sep 17 00:00:00 2001
From: Milen Karmidzhanov <milen.karmidzhanov@sap.com>
Date: Mon, 16 Mar 2026 18:35:37 +0200
Subject: [PATCH 1/5] feat(ui5-combobox): add suggestion highlight of matching
 characters

---
 .../generateHighlightedMarkupFirstMatch.ts    |  43 +++
 packages/main/cypress/specs/ComboBox.cy.tsx   | 291 ++++++++++++++++++
 .../main/cypress/specs/ComboBox.mobile.cy.tsx | 100 ++++++
 packages/main/src/ComboBox.ts                 |  46 +++
 packages/main/src/ComboBoxItemTemplate.tsx    |   2 +-
 packages/main/src/ComboBoxPopoverTemplate.tsx |  14 +-
 packages/main/test/pages/ComboBox.html        |  16 +-
 7 files changed, 501 insertions(+), 11 deletions(-)
 create mode 100644 packages/base/src/util/generateHighlightedMarkupFirstMatch.ts

diff --git a/packages/base/src/util/generateHighlightedMarkupFirstMatch.ts b/packages/base/src/util/generateHighlightedMarkupFirstMatch.ts
new file mode 100644
index 000000000000..adafa163c797
--- /dev/null
+++ b/packages/base/src/util/generateHighlightedMarkupFirstMatch.ts
@@ -0,0 +1,43 @@
+import escapeRegex from "./escapeRegex.js";
+// @ts-expect-error
+import encodeXML from "../sap/base/security/encodeXML.js";
+
+/**
+ * Generate markup for a raw string where the first match following StartsWithPerTerm pattern is wrapped with `<b>` tag.
+ * StartsWithPerTerm pattern: finds the first word (at start or after whitespace) that starts with the search text.
+ * All inputs to this function are considered literal text, and special characters will always be escaped.
+ * @param {string} text The text to add highlighting to
+ * @param {string} textToHighlight The text which should be highlighted (case-insensitive)
+ * @return {string} the markup HTML which contains the first match surrounded with a `<b>` tag.
+ */
+function generateHighlightedMarkupFirstMatch(text: string | undefined, textToHighlight: string): string {
+	const normalizedText = text || "";
+
+	if (!normalizedText || !textToHighlight) {
+		return encodeXML(normalizedText) as string;
+	}
+
+	const filterValue = textToHighlight.toLowerCase();
+	const lowerText = normalizedText.toLowerCase();
+	const matchLength = textToHighlight.length;
+
+	// Find the first word that starts with textToHighlight (StartsWithPerTerm pattern)
+	let matchIndex = lowerText.search(new RegExp(`(^|\\s)${escapeRegex(filterValue)}`));
+	if (matchIndex !== -1 && lowerText[matchIndex] === " ") {
+		matchIndex++; // Skip the space
+	}
+
+	// If no match found, return encoded text
+	if (matchIndex === -1) {
+		return encodeXML(normalizedText) as string;
+	}
+
+	// Build highlighted markup with only the first match
+	const beforeMatch = encodeXML(normalizedText.substring(0, matchIndex)) as string;
+	const match = encodeXML(normalizedText.substring(matchIndex, matchIndex + matchLength)) as string;
+	const afterMatch = encodeXML(normalizedText.substring(matchIndex + matchLength)) as string;
+
+	return `${beforeMatch}<b>${match}</b>${afterMatch}`;
+}
+
+export default generateHighlightedMarkupFirstMatch;
diff --git a/packages/main/cypress/specs/ComboBox.cy.tsx b/packages/main/cypress/specs/ComboBox.cy.tsx
index 69862539d967..fc8ed5ad03d5 100644
--- a/packages/main/cypress/specs/ComboBox.cy.tsx
+++ b/packages/main/cypress/specs/ComboBox.cy.tsx
@@ -3542,3 +3542,294 @@ describe("Case-Insensitive Selection", () => {
 		cy.get("[ui5-cb-item]").eq(1).should("have.prop", "selected", true);
 	});
 });
+
+describe("Highlighting", () => {
+	it("should highlight first match when highlight is enabled", () => {
+		cy.mount(
+			<ComboBox highlight>
+				<ComboBoxItem text="Argentina"></ComboBoxItem>
+				<ComboBoxItem text="South Africa"></ComboBoxItem>
+				<ComboBoxItem text="Bulgaria"></ComboBoxItem>
+			</ComboBox>
+		);
+
+		cy.get("[ui5-combobox]")
+			.as("combobox")
+			.shadow()
+			.find("input")
+			.as("input");
+
+		// Type "A" - should highlight first word starting with "A"
+		cy.get("@input").realClick();
+		cy.get("@input").realType("A");
+
+		// Check Argentina is highlighted
+		cy.get("@combobox").find("[ui5-cb-item]").eq(0).shadow().find(".ui5-li-title")
+			.should("contain.html", "<b>A</b>");
+
+		// Check South Africa is highlighted (second word)
+		cy.get("@combobox").find("[ui5-cb-item]").eq(1).shadow().find(".ui5-li-title")
+			.should("contain.html", "<b>A</b>");
+	});
+
+	it("should not highlight when highlight is disabled", () => {
+		cy.mount(
+			<ComboBox>
+				<ComboBoxItem text="Argentina"></ComboBoxItem>
+				<ComboBoxItem text="South Africa"></ComboBoxItem>
+			</ComboBox>
+		);
+
+		cy.get("[ui5-combobox]")
+			.as("combobox")
+			.shadow()
+			.find("input")
+			.realClick();
+
+		cy.get("[ui5-combobox]")
+			.shadow()
+			.find("input")
+			.realType("A");
+
+		// Check no <b> tags in the items
+		cy.get("@combobox").find("[ui5-cb-item]").eq(0).shadow().find(".ui5-li-title")
+			.should("not.contain.html", "<b>");
+	});
+
+	it("should highlight with StartsWithPerTerm pattern regardless of filter mode", () => {
+		cy.mount(
+			<ComboBox highlight filter="Contains">
+				<ComboBoxItem text="Bosnia and Herzegovina"></ComboBoxItem>
+				<ComboBoxItem text="South Africa"></ComboBoxItem>
+			</ComboBox>
+		);
+
+		cy.get("[ui5-combobox]")
+			.as("combobox")
+			.shadow()
+			.find("input")
+			.as("input");
+
+		// Type "Her" - with Contains filter, both items should show
+		// But highlighting should use StartsWithPerTerm (first word starting with "Her")
+		cy.get("@input").realClick();
+		cy.get("@input").realType("Her");
+
+		// Herzegovina should be highlighted (word starts with "Her")
+		cy.get("@combobox").find("[ui5-cb-item]").eq(0).shadow().find(".ui5-li-title")
+			.should("contain.html", "<b>Her</b>");
+	});
+
+	it("should highlight grouped items", () => {
+		cy.mount(
+			<ComboBox highlight>
+				<ComboBoxItemGroup header-text="Group A">
+					<ComboBoxItem text="Argentina"></ComboBoxItem>
+					<ComboBoxItem text="Australia"></ComboBoxItem>
+				</ComboBoxItemGroup>
+				<ComboBoxItemGroup header-text="Group B">
+					<ComboBoxItem text="South Africa"></ComboBoxItem>
+					<ComboBoxItem text="Brazil"></ComboBoxItem>
+				</ComboBoxItemGroup>
+			</ComboBox>
+		);
+
+		cy.get("[ui5-combobox]")
+			.as("combobox")
+			.shadow()
+			.find("input")
+			.realClick();
+
+		cy.get("[ui5-combobox]")
+			.shadow()
+			.find("input")
+			.realType("A");
+
+		// Check both items in Group A are highlighted
+		cy.get("@combobox").find("[ui5-cb-item-group]").eq(0)
+			.find("[ui5-cb-item]").eq(0).shadow().find(".ui5-li-title")
+			.should("contain.html", "<b>A</b>");
+
+		cy.get("@combobox").find("[ui5-cb-item-group]").eq(0)
+			.find("[ui5-cb-item]").eq(1).shadow().find(".ui5-li-title")
+			.should("contain.html", "<b>A</b>");
+
+		// Check South Africa is highlighted (second word)
+		cy.get("@combobox").find("[ui5-cb-item-group]").eq(1)
+			.find("[ui5-cb-item]").eq(0).shadow().find(".ui5-li-title")
+			.should("contain.html", "<b>A</b>");
+	});
+
+	it("should handle special characters safely", () => {
+		cy.mount(
+			<ComboBox highlight>
+				<ComboBoxItem text="<script>alert('XSS')</script>"></ComboBoxItem>
+				<ComboBoxItem text="Price: $100 & Up"></ComboBoxItem>
+			</ComboBox>
+		);
+
+		cy.get("[ui5-combobox]")
+			.as("combobox")
+			.shadow()
+			.find("input")
+			.realClick();
+
+		cy.get("[ui5-combobox]")
+			.shadow()
+			.find("input")
+			.realType("P");
+
+		// Special characters should be escaped, no XSS
+		cy.get("@combobox").find("[ui5-cb-item]").eq(1).shadow().find(".ui5-li-title")
+			.should("contain.html", "<b>P</b>rice: $100 &amp; Up");
+
+		// Script tags should be escaped
+		cy.get("@combobox").find("[ui5-cb-item]").eq(0).shadow().find(".ui5-li-title")
+			.should("not.contain.html", "<script>");
+	});
+
+	it("should only highlight text, not additionalText", () => {
+		cy.mount(
+			<ComboBox highlight>
+				<ComboBoxItem text="Argentina" additional-text="AR"></ComboBoxItem>
+				<ComboBoxItem text="Australia" additional-text="AU"></ComboBoxItem>
+			</ComboBox>
+		);
+
+		cy.get("[ui5-combobox]")
+			.as("combobox")
+			.shadow()
+			.find("input")
+			.realClick();
+
+		cy.get("[ui5-combobox]")
+			.shadow()
+			.find("input")
+			.realType("A");
+
+		// Main text should be highlighted
+		cy.get("@combobox").find("[ui5-cb-item]").eq(0).shadow().find(".ui5-li-title")
+			.should("contain.html", "<b>A</b>");
+
+		// Additional text should NOT be highlighted (no <b> tags)
+		cy.get("@combobox").find("[ui5-cb-item]").eq(0).shadow().find(".ui5-li-additional-text")
+			.should("not.contain.html", "<b>");
+	});
+
+	it("should clear highlighting when input is cleared", () => {
+		cy.mount(
+			<ComboBox highlight showClearIcon>
+				<ComboBoxItem text="Argentina"></ComboBoxItem>
+				<ComboBoxItem text="Australia"></ComboBoxItem>
+			</ComboBox>
+		);
+
+		cy.get("[ui5-combobox]")
+			.as("combobox")
+			.shadow()
+			.find("input")
+			.as("input");
+
+		// Type to get highlighting
+		cy.get("@input").realClick();
+		cy.get("@input").realType("A");
+
+		// Should be highlighted
+		cy.get("@combobox").find("[ui5-cb-item]").eq(0).shadow().find(".ui5-li-title")
+			.should("contain.html", "<b>A</b>");
+
+		// Clear input
+		cy.get("@combobox").shadow().find(".ui5-input-clear-icon-wrapper").realClick();
+
+		// Open dropdown again to check items
+		cy.get("@combobox").shadow().find("[ui5-icon]").last().realClick();
+
+		// Should not be highlighted anymore
+		cy.get("@combobox").find("[ui5-cb-item]").eq(0).shadow().find(".ui5-li-title")
+			.should("not.contain.html", "<b>");
+	});
+
+	it("should highlight only the first match, not all occurrences", () => {
+		cy.mount(
+			<ComboBox highlight>
+				<ComboBoxItem text="New New York"></ComboBoxItem>
+			</ComboBox>
+		);
+
+		cy.get("[ui5-combobox]")
+			.as("combobox")
+			.shadow()
+			.find("input")
+			.realClick();
+
+		cy.get("[ui5-combobox]")
+			.shadow()
+			.find("input")
+			.realType("New");
+
+		// Should only highlight the first "New", not the second
+		cy.get("@combobox").find("[ui5-cb-item]").eq(0).shadow().find(".ui5-li-title")
+			.invoke("html")
+			.then((html) => {
+				// Count <b> tags - should be exactly 1 pair
+				const openTags = (html.match(/<b>/g) || []).length;
+				const closeTags = (html.match(/<\/b>/g) || []).length;
+				expect(openTags).to.equal(1);
+				expect(closeTags).to.equal(1);
+			});
+	});
+
+	it("should handle case-insensitive matching", () => {
+		cy.mount(
+			<ComboBox highlight>
+				<ComboBoxItem text="ARGENTINA"></ComboBoxItem>
+				<ComboBoxItem text="argentina"></ComboBoxItem>
+				<ComboBoxItem text="ArGeNtInA"></ComboBoxItem>
+			</ComboBox>
+		);
+
+		cy.get("[ui5-combobox]")
+			.as("combobox")
+			.shadow()
+			.find("input")
+			.realClick();
+
+		cy.get("[ui5-combobox]")
+			.shadow()
+			.find("input")
+			.realType("arg");
+
+		// All three should be highlighted (case-insensitive)
+		cy.get("@combobox").find("[ui5-cb-item]").eq(0).shadow().find(".ui5-li-title")
+			.should("contain.html", "<b>ARG</b>");
+
+		cy.get("@combobox").find("[ui5-cb-item]").eq(1).shadow().find(".ui5-li-title")
+			.should("contain.html", "<b>arg</b>");
+
+		cy.get("@combobox").find("[ui5-cb-item]").eq(2).shadow().find(".ui5-li-title")
+			.should("contain.html", "<b>ArG</b>");
+	});
+
+	it("should preserve original case in highlighting", () => {
+		cy.mount(
+			<ComboBox highlight>
+				<ComboBoxItem text="South AFRICA"></ComboBoxItem>
+			</ComboBox>
+		);
+
+		cy.get("[ui5-combobox]")
+			.as("combobox")
+			.shadow()
+			.find("input")
+			.realClick();
+
+		cy.get("[ui5-combobox]")
+			.shadow()
+			.find("input")
+			.realType("afr");
+
+		// Should preserve original case "AFR" not "afr"
+		cy.get("@combobox").find("[ui5-cb-item]").eq(0).shadow().find(".ui5-li-title")
+			.should("contain.html", "<b>AFR</b>");
+	});
+});
diff --git a/packages/main/cypress/specs/ComboBox.mobile.cy.tsx b/packages/main/cypress/specs/ComboBox.mobile.cy.tsx
index fe2830e4bd06..e76f731275c1 100644
--- a/packages/main/cypress/specs/ComboBox.mobile.cy.tsx
+++ b/packages/main/cypress/specs/ComboBox.mobile.cy.tsx
@@ -543,3 +543,103 @@ describe("Value state header", () => {
 			.should("be.visible");
 	});
 });
+
+describe("Mobile Highlighting", () => {
+	beforeEach(() => {
+		cy.ui5SimulateDevice("phone");
+	});
+
+	it("Should highlight suggestions in mobile mode", () => {
+		cy.mount(
+			<ComboBox highlight>
+				<ComboBoxItem text="Argentina" />
+				<ComboBoxItem text="South Africa" />
+				<ComboBoxItem text="Bulgaria" />
+			</ComboBox>
+		);
+
+		cy.get("[ui5-combobox]").realClick();
+
+		cy.get("[ui5-combobox]")
+			.shadow()
+			.find<ResponsivePopover>("[ui5-responsive-popover]")
+			.as("popover")
+			.ui5ResponsivePopoverOpened();
+
+		// Type in mobile input
+		cy.get("@popover").find("[ui5-input]").shadow().find("input").realType("A");
+
+		// Check that SuggestionItems are highlighted
+		cy.get("@popover").find("[ui5-input]").find("[ui5-suggestion-item]").eq(0)
+			.shadow().find(".ui5-li-title")
+			.should("contain.html", "<b>A</b>");
+
+		cy.get("@popover").find("[ui5-input]").find("[ui5-suggestion-item]").eq(1)
+			.shadow().find(".ui5-li-title")
+			.should("contain.html", "<b>A</b>");
+	});
+
+	it("Should highlight grouped items in mobile mode", () => {
+		cy.mount(
+			<ComboBox highlight>
+				<ComboBoxItemGroup header-text="Group A">
+					<ComboBoxItem text="Argentina" />
+					<ComboBoxItem text="Australia" />
+				</ComboBoxItemGroup>
+				<ComboBoxItemGroup header-text="Group B">
+					<ComboBoxItem text="South Africa" />
+					<ComboBoxItem text="Brazil" />
+				</ComboBoxItemGroup>
+			</ComboBox>
+		);
+
+		cy.get("[ui5-combobox]").realClick();
+
+		cy.get("[ui5-combobox]")
+			.shadow()
+			.find<ResponsivePopover>("[ui5-responsive-popover]")
+			.as("popover")
+			.ui5ResponsivePopoverOpened();
+
+		// Type in mobile input
+		cy.get("@popover").find("[ui5-input]").shadow().find("input").realType("A");
+
+		// Check that the first three suggestion items are highlighted (Argentina, Australia, South Africa)
+		cy.get("@popover").find("[ui5-input]").find("[ui5-suggestion-item]").eq(0)
+			.shadow().find(".ui5-li-title")
+			.should("contain.html", "<b>A</b>");
+
+		cy.get("@popover").find("[ui5-input]").find("[ui5-suggestion-item]").eq(1)
+			.shadow().find(".ui5-li-title")
+			.should("contain.html", "<b>A</b>");
+
+		cy.get("@popover").find("[ui5-input]").find("[ui5-suggestion-item]").eq(2)
+			.shadow().find(".ui5-li-title")
+			.should("contain.html", "<b>A</b>");
+	});
+
+	it("Should not highlight in mobile mode when highlight is disabled", () => {
+		cy.mount(
+			<ComboBox>
+				<ComboBoxItem text="Argentina" />
+				<ComboBoxItem text="Australia" />
+			</ComboBox>
+		);
+
+		cy.get("[ui5-combobox]").realClick();
+
+		cy.get("[ui5-combobox]")
+			.shadow()
+			.find<ResponsivePopover>("[ui5-responsive-popover]")
+			.as("popover")
+			.ui5ResponsivePopoverOpened();
+
+		// Type in mobile input
+		cy.get("@popover").find("[ui5-input]").shadow().find("input").realType("A");
+
+		// Should NOT contain <b> tags
+		cy.get("@popover").find("[ui5-input]").find("[ui5-suggestion-item]").eq(0)
+			.shadow().find(".ui5-li-title")
+			.should("not.contain.html", "<b>");
+	});
+});
diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts
index 44ea07993ce6..c8580b17ee9e 100644
--- a/packages/main/src/ComboBox.ts
+++ b/packages/main/src/ComboBox.ts
@@ -38,6 +38,7 @@ import {
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import { attachListeners } from "@ui5/webcomponents-base/dist/util/valueStateNavigation.js";
 import arraysAreEqual from "@ui5/webcomponents-base/dist/util/arraysAreEqual.js";
+import generateHighlightedMarkupFirstMatch from "@ui5/webcomponents-base/dist/util/generateHighlightedMarkupFirstMatch.js";
 
 import type { IIcon } from "./Icon.js";
 import * as Filters from "./Filters.js";
@@ -387,6 +388,17 @@ class ComboBox extends UI5Element implements IFormInputElement {
 	@property({ type: Boolean })
 	showClearIcon = false;
 
+	/**
+	 * Defines if characters within the suggestions are to be highlighted
+	 * in case the input value matches parts of the suggestions text.
+	 *
+	 * @default false
+	 * @public
+	 * @since 2.21.0
+	 */
+	@property({ type: Boolean })
+	highlight = false;
+
 	/**
 	 * Indicates whether the input is focused
 	 * @private
@@ -575,6 +587,23 @@ class ComboBox extends UI5Element implements IFormInputElement {
 			this._useSelectedValue = true;
 		}
 
+		// Highlight filtered items
+		this._filteredItems.forEach(item => {
+			if (!item) {
+				return;
+			}
+			if (isInstanceOfComboBoxItemGroup(item)) {
+				// For grouped items, highlight each item in the group
+				item.items.forEach(nestedItem => {
+					if (nestedItem) {
+						this._highlightItem(nestedItem);
+					}
+				});
+			} else {
+				this._highlightItem(item as ComboBoxItem);
+			}
+		});
+
 		this._selectMatchingItem();
 		this._initialRendering = false;
 
@@ -1215,6 +1244,15 @@ class ComboBox extends UI5Element implements IFormInputElement {
 		return [...filteredItemGroups, ...filteredItems];
 	}
 
+	/**
+	 * Sets the markupText property of an item with highlighted first match.
+	 * @param item The ComboBox item to highlight
+	 * @private
+	 */
+	_highlightItem(item: ComboBoxItem) {
+		item.markupText = generateHighlightedMarkupFirstMatch(item.text, this._highlightValue);
+	}
+
 	_getFirstMatchingItem(current: string): IComboBoxItem | void {
 		const allItems = this._getItems();
 		const currentlyFocusedItem = allItems.find(item => item.focused === true);
@@ -1697,6 +1735,14 @@ class ComboBox extends UI5Element implements IFormInputElement {
 			},
 		};
 	}
+
+	/**
+	 * Getter that returns the filter value for highlighting when highlight is enabled.
+	 * @private
+	 */
+	get _highlightValue() {
+		return this.highlight ? this.filterValue : "";
+	}
 }
 
 ComboBox.define();
diff --git a/packages/main/src/ComboBoxItemTemplate.tsx b/packages/main/src/ComboBoxItemTemplate.tsx
index 07d4dd4f1152..b8dd124048aa 100644
--- a/packages/main/src/ComboBoxItemTemplate.tsx
+++ b/packages/main/src/ComboBoxItemTemplate.tsx
@@ -9,7 +9,7 @@ function listItemContent(this: ComboBoxItem) {
 	return (
 		<div part="content" id="content" class="ui5-li-content">
 			<div class="ui5-li-text-wrapper">
-				{ this.text && <span part="title" className="ui5-li-title">{this.text}</span> }
+				{ this.markupText && <span part="title" className="ui5-li-title" dangerouslySetInnerHTML={{ __html: this.markupText }}></span> }
 				{ this.additionalText && <span part="additional-text" class="ui5-li-additional-text">{this.additionalText}</span> }
 			</div>
 		</div>
diff --git a/packages/main/src/ComboBoxPopoverTemplate.tsx b/packages/main/src/ComboBoxPopoverTemplate.tsx
index 378e70ca2f95..0a9f8403e4b0 100644
--- a/packages/main/src/ComboBoxPopoverTemplate.tsx
+++ b/packages/main/src/ComboBoxPopoverTemplate.tsx
@@ -7,6 +7,7 @@ import Popover from "./Popover.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import BusyIndicator from "./BusyIndicator.js";
 import SuggestionItem from "./SuggestionItem.js";
+import generateHighlightedMarkupFirstMatch from "@ui5/webcomponents-base/dist/util/generateHighlightedMarkupFirstMatch.js";
 import type ComboBox from "./ComboBox.js";
 
 export default function ComboBoxPopoverTemplate(this: ComboBox) {
@@ -53,7 +54,18 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 								onInput={this._handleMobileInput}
 								onChange={this._inputChange}
 							>
-								{ this._filteredItems.map(item => <SuggestionItem text={item.text} additional-text={item.additionalText}/>)}
+								{ 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._highlightValue)}/>
+											);
+									}
+									// For regular items
+									return <SuggestionItem text={item.text} additional-text={item.additionalText} markupText={generateHighlightedMarkupFirstMatch(item.text, this._highlightValue)}/>;
+								})}
 							</Input>
 						</div>
 					</div>
diff --git a/packages/main/test/pages/ComboBox.html b/packages/main/test/pages/ComboBox.html
index 88ca8ec15825..40a8b2a0aa89 100644
--- a/packages/main/test/pages/ComboBox.html
+++ b/packages/main/test/pages/ComboBox.html
@@ -27,7 +27,7 @@
 
 	<div class="demo-section">
 		<ui5-label id="countryLabel">Select country: </ui5-label>
-		<ui5-combobox id="combo" class="combobox2auto" value="Bulgaria" accessible-name-ref="countryLabel">
+		<ui5-combobox filter="Contains" id="combo" class="combobox2auto" value="Bulgaria" accessible-name-ref="countryLabel">
 			<ui5-cb-item text="Algeria"></ui5-cb-item>
 			<ui5-cb-item text="Argentina"></ui5-cb-item>
 			<ui5-cb-item text="Australia"></ui5-cb-item>
@@ -39,9 +39,14 @@
 			<ui5-cb-item text="Bulgaria"></ui5-cb-item>
 			<ui5-cb-item text="Canada"></ui5-cb-item>
 			<ui5-cb-item text="Chile"></ui5-cb-item>
+			<ui5-cb-item text="Bosna and Herzegovina"></ui5-cb-item>
+			<ui5-cb-item text="Her Her"></ui5-cb-item>
+			<ui5-cb-item text="Bosna and Her Her"></ui5-cb-item>
 		</ui5-combobox>
 		<ui5-button id="combo-focus">Focus ComboBox</ui5-button>
 		<ui5-button id="value-set-btn">Set value</ui5-button>
+		<span id="change-event-result"></span>
+		<span id="selection-change-event-result"></span>
 
 		<ui5-combobox id="combo2" class="combobox2auto" accessible-name="Select destination:">
 			<ui5-cb-item text="Algeria" id="cbi"></ui5-cb-item>
@@ -169,13 +174,6 @@
 		</ui5-combobox>
 	</div>
 
-	<div class="demo-section">
-		<span id="change-event-result"></span>
-		<br />
-		<span id="selection-change-event-result"></span>
-
-	</div>
-
 		<div class="demo-section">
 		<span>SelectionChange event testing</span>
 
@@ -613,7 +611,7 @@ <h3>ComboBox Composition</h3>
 		});
 
 		document.getElementById("combo").addEventListener("ui5-selection-change", function (event) {
-			document.getElementById("selection-change-event-result").innerHTML = event.detail.item.text;
+			document.getElementById("selection-change-event-result").innerHTML = event.detail.item ? event.detail.item.text : "(cleared)";
 		});
 
 		document.getElementById("change-cb").addEventListener("ui5-change", function (event) {

From 08b97e403a78d522d04c35a2cfe2d1e53b7ed62f Mon Sep 17 00:00:00 2001
From: Milen Karmidzhanov <milen.karmidzhanov@sap.com>
Date: Mon, 16 Mar 2026 18:37:47 +0200
Subject: [PATCH 2/5] feat(ui5-combobox): add suggestion highlight of matching
 characters

---
 packages/main/test/pages/ComboBox.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/main/test/pages/ComboBox.html b/packages/main/test/pages/ComboBox.html
index 40a8b2a0aa89..e278ffc8c04d 100644
--- a/packages/main/test/pages/ComboBox.html
+++ b/packages/main/test/pages/ComboBox.html
@@ -27,7 +27,7 @@
 
 	<div class="demo-section">
 		<ui5-label id="countryLabel">Select country: </ui5-label>
-		<ui5-combobox filter="Contains" id="combo" class="combobox2auto" value="Bulgaria" accessible-name-ref="countryLabel">
+		<ui5-combobox id="combo" class="combobox2auto" value="Bulgaria" accessible-name-ref="countryLabel">
 			<ui5-cb-item text="Algeria"></ui5-cb-item>
 			<ui5-cb-item text="Argentina"></ui5-cb-item>
 			<ui5-cb-item text="Australia"></ui5-cb-item>

From 95943e9c311f18aee9255af830ab214b340d025b Mon Sep 17 00:00:00 2001
From: Milen Karmidzhanov <milen.karmidzhanov@sap.com>
Date: Tue, 17 Mar 2026 11:45:58 +0200
Subject: [PATCH 3/5] feat(ui5-combobox): add suggestion highlight of matching
 characters

---
 packages/main/cypress/specs/ComboBox.cy.tsx   | 44 +++++--------------
 .../main/cypress/specs/ComboBox.mobile.cy.tsx | 29 +-----------
 packages/main/src/ComboBox.ts                 | 20 +--------
 packages/main/src/ComboBoxPopoverTemplate.tsx |  4 +-
 4 files changed, 15 insertions(+), 82 deletions(-)

diff --git a/packages/main/cypress/specs/ComboBox.cy.tsx b/packages/main/cypress/specs/ComboBox.cy.tsx
index fc8ed5ad03d5..ab747af1db74 100644
--- a/packages/main/cypress/specs/ComboBox.cy.tsx
+++ b/packages/main/cypress/specs/ComboBox.cy.tsx
@@ -3544,9 +3544,9 @@ describe("Case-Insensitive Selection", () => {
 });
 
 describe("Highlighting", () => {
-	it("should highlight first match when highlight is enabled", () => {
+	it("should highlight first match when typing", () => {
 		cy.mount(
-			<ComboBox highlight>
+			<ComboBox>
 				<ComboBoxItem text="Argentina"></ComboBoxItem>
 				<ComboBoxItem text="South Africa"></ComboBoxItem>
 				<ComboBoxItem text="Bulgaria"></ComboBoxItem>
@@ -3572,33 +3572,9 @@ describe("Highlighting", () => {
 			.should("contain.html", "<b>A</b>");
 	});
 
-	it("should not highlight when highlight is disabled", () => {
-		cy.mount(
-			<ComboBox>
-				<ComboBoxItem text="Argentina"></ComboBoxItem>
-				<ComboBoxItem text="South Africa"></ComboBoxItem>
-			</ComboBox>
-		);
-
-		cy.get("[ui5-combobox]")
-			.as("combobox")
-			.shadow()
-			.find("input")
-			.realClick();
-
-		cy.get("[ui5-combobox]")
-			.shadow()
-			.find("input")
-			.realType("A");
-
-		// Check no <b> tags in the items
-		cy.get("@combobox").find("[ui5-cb-item]").eq(0).shadow().find(".ui5-li-title")
-			.should("not.contain.html", "<b>");
-	});
-
 	it("should highlight with StartsWithPerTerm pattern regardless of filter mode", () => {
 		cy.mount(
-			<ComboBox highlight filter="Contains">
+			<ComboBox filter="Contains">
 				<ComboBoxItem text="Bosnia and Herzegovina"></ComboBoxItem>
 				<ComboBoxItem text="South Africa"></ComboBoxItem>
 			</ComboBox>
@@ -3622,7 +3598,7 @@ describe("Highlighting", () => {
 
 	it("should highlight grouped items", () => {
 		cy.mount(
-			<ComboBox highlight>
+			<ComboBox>
 				<ComboBoxItemGroup header-text="Group A">
 					<ComboBoxItem text="Argentina"></ComboBoxItem>
 					<ComboBoxItem text="Australia"></ComboBoxItem>
@@ -3662,7 +3638,7 @@ describe("Highlighting", () => {
 
 	it("should handle special characters safely", () => {
 		cy.mount(
-			<ComboBox highlight>
+			<ComboBox>
 				<ComboBoxItem text="<script>alert('XSS')</script>"></ComboBoxItem>
 				<ComboBoxItem text="Price: $100 & Up"></ComboBoxItem>
 			</ComboBox>
@@ -3690,7 +3666,7 @@ describe("Highlighting", () => {
 
 	it("should only highlight text, not additionalText", () => {
 		cy.mount(
-			<ComboBox highlight>
+			<ComboBox>
 				<ComboBoxItem text="Argentina" additional-text="AR"></ComboBoxItem>
 				<ComboBoxItem text="Australia" additional-text="AU"></ComboBoxItem>
 			</ComboBox>
@@ -3718,7 +3694,7 @@ describe("Highlighting", () => {
 
 	it("should clear highlighting when input is cleared", () => {
 		cy.mount(
-			<ComboBox highlight showClearIcon>
+			<ComboBox showClearIcon>
 				<ComboBoxItem text="Argentina"></ComboBoxItem>
 				<ComboBoxItem text="Australia"></ComboBoxItem>
 			</ComboBox>
@@ -3751,7 +3727,7 @@ describe("Highlighting", () => {
 
 	it("should highlight only the first match, not all occurrences", () => {
 		cy.mount(
-			<ComboBox highlight>
+			<ComboBox>
 				<ComboBoxItem text="New New York"></ComboBoxItem>
 			</ComboBox>
 		);
@@ -3781,7 +3757,7 @@ describe("Highlighting", () => {
 
 	it("should handle case-insensitive matching", () => {
 		cy.mount(
-			<ComboBox highlight>
+			<ComboBox>
 				<ComboBoxItem text="ARGENTINA"></ComboBoxItem>
 				<ComboBoxItem text="argentina"></ComboBoxItem>
 				<ComboBoxItem text="ArGeNtInA"></ComboBoxItem>
@@ -3812,7 +3788,7 @@ describe("Highlighting", () => {
 
 	it("should preserve original case in highlighting", () => {
 		cy.mount(
-			<ComboBox highlight>
+			<ComboBox>
 				<ComboBoxItem text="South AFRICA"></ComboBoxItem>
 			</ComboBox>
 		);
diff --git a/packages/main/cypress/specs/ComboBox.mobile.cy.tsx b/packages/main/cypress/specs/ComboBox.mobile.cy.tsx
index e76f731275c1..72ce92c0c276 100644
--- a/packages/main/cypress/specs/ComboBox.mobile.cy.tsx
+++ b/packages/main/cypress/specs/ComboBox.mobile.cy.tsx
@@ -551,7 +551,7 @@ describe("Mobile Highlighting", () => {
 
 	it("Should highlight suggestions in mobile mode", () => {
 		cy.mount(
-			<ComboBox highlight>
+			<ComboBox>
 				<ComboBoxItem text="Argentina" />
 				<ComboBoxItem text="South Africa" />
 				<ComboBoxItem text="Bulgaria" />
@@ -581,7 +581,7 @@ describe("Mobile Highlighting", () => {
 
 	it("Should highlight grouped items in mobile mode", () => {
 		cy.mount(
-			<ComboBox highlight>
+			<ComboBox>
 				<ComboBoxItemGroup header-text="Group A">
 					<ComboBoxItem text="Argentina" />
 					<ComboBoxItem text="Australia" />
@@ -617,29 +617,4 @@ describe("Mobile Highlighting", () => {
 			.shadow().find(".ui5-li-title")
 			.should("contain.html", "<b>A</b>");
 	});
-
-	it("Should not highlight in mobile mode when highlight is disabled", () => {
-		cy.mount(
-			<ComboBox>
-				<ComboBoxItem text="Argentina" />
-				<ComboBoxItem text="Australia" />
-			</ComboBox>
-		);
-
-		cy.get("[ui5-combobox]").realClick();
-
-		cy.get("[ui5-combobox]")
-			.shadow()
-			.find<ResponsivePopover>("[ui5-responsive-popover]")
-			.as("popover")
-			.ui5ResponsivePopoverOpened();
-
-		// Type in mobile input
-		cy.get("@popover").find("[ui5-input]").shadow().find("input").realType("A");
-
-		// Should NOT contain <b> tags
-		cy.get("@popover").find("[ui5-input]").find("[ui5-suggestion-item]").eq(0)
-			.shadow().find(".ui5-li-title")
-			.should("not.contain.html", "<b>");
-	});
 });
diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts
index c8580b17ee9e..73153fe2aae2 100644
--- a/packages/main/src/ComboBox.ts
+++ b/packages/main/src/ComboBox.ts
@@ -388,17 +388,6 @@ class ComboBox extends UI5Element implements IFormInputElement {
 	@property({ type: Boolean })
 	showClearIcon = false;
 
-	/**
-	 * Defines if characters within the suggestions are to be highlighted
-	 * in case the input value matches parts of the suggestions text.
-	 *
-	 * @default false
-	 * @public
-	 * @since 2.21.0
-	 */
-	@property({ type: Boolean })
-	highlight = false;
-
 	/**
 	 * Indicates whether the input is focused
 	 * @private
@@ -1250,7 +1239,7 @@ class ComboBox extends UI5Element implements IFormInputElement {
 	 * @private
 	 */
 	_highlightItem(item: ComboBoxItem) {
-		item.markupText = generateHighlightedMarkupFirstMatch(item.text, this._highlightValue);
+		item.markupText = generateHighlightedMarkupFirstMatch(item.text, this.filterValue);
 	}
 
 	_getFirstMatchingItem(current: string): IComboBoxItem | void {
@@ -1736,13 +1725,6 @@ class ComboBox extends UI5Element implements IFormInputElement {
 		};
 	}
 
-	/**
-	 * Getter that returns the filter value for highlighting when highlight is enabled.
-	 * @private
-	 */
-	get _highlightValue() {
-		return this.highlight ? this.filterValue : "";
-	}
 }
 
 ComboBox.define();
diff --git a/packages/main/src/ComboBoxPopoverTemplate.tsx b/packages/main/src/ComboBoxPopoverTemplate.tsx
index 0a9f8403e4b0..9eb3f79ae584 100644
--- a/packages/main/src/ComboBoxPopoverTemplate.tsx
+++ b/packages/main/src/ComboBoxPopoverTemplate.tsx
@@ -60,11 +60,11 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 										return item.items
 											.filter(nestedItem => !!nestedItem)
 											.map(nestedItem =>
-												<SuggestionItem text={nestedItem.text} additional-text={nestedItem.additionalText} markupText={generateHighlightedMarkupFirstMatch(nestedItem.text, this._highlightValue)}/>
+												<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._highlightValue)}/>;
+									return <SuggestionItem text={item.text} additional-text={item.additionalText} markupText={generateHighlightedMarkupFirstMatch(item.text, this.filterValue)}/>;
 								})}
 							</Input>
 						</div>

From 81bad6acb0068e1a2b9eafdb2c4fb4c5a00d9722 Mon Sep 17 00:00:00 2001
From: Milen Karmidzhanov <milen.karmidzhanov@sap.com>
Date: Tue, 17 Mar 2026 12:07:14 +0200
Subject: [PATCH 4/5] feat(ui5-combobox): add suggestion highlight of matching
 characters

---
 packages/main/src/ComboBox.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts
index 8d02c50d2dcb..6d5542845dbd 100644
--- a/packages/main/src/ComboBox.ts
+++ b/packages/main/src/ComboBox.ts
@@ -1728,7 +1728,6 @@ class ComboBox extends UI5Element implements IFormInputElement {
 			},
 		};
 	}
-
 }
 
 ComboBox.define();

From 779e424a099e825dc54fc91eef449e9808da7261 Mon Sep 17 00:00:00 2001
From: Milen Karmidzhanov <milen.karmidzhanov@sap.com>
Date: Tue, 17 Mar 2026 16:18:12 +0200
Subject: [PATCH 5/5] feat(ui5-combobox): add suggestion highlight of matching
 characters

---
 packages/base/src/util/generateHighlightedMarkupFirstMatch.ts | 2 +-
 packages/main/src/ComboBox.ts                                 | 2 +-
 packages/main/src/ComboBoxPopoverTemplate.tsx                 | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/base/src/util/generateHighlightedMarkupFirstMatch.ts b/packages/base/src/util/generateHighlightedMarkupFirstMatch.ts
index adafa163c797..867ead7f6184 100644
--- a/packages/base/src/util/generateHighlightedMarkupFirstMatch.ts
+++ b/packages/base/src/util/generateHighlightedMarkupFirstMatch.ts
@@ -10,7 +10,7 @@ import encodeXML from "../sap/base/security/encodeXML.js";
  * @param {string} textToHighlight The text which should be highlighted (case-insensitive)
  * @return {string} the markup HTML which contains the first match surrounded with a `<b>` tag.
  */
-function generateHighlightedMarkupFirstMatch(text: string | undefined, textToHighlight: string): string {
+function generateHighlightedMarkupFirstMatch(text: string, textToHighlight: string): string {
 	const normalizedText = text || "";
 
 	if (!normalizedText || !textToHighlight) {
diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts
index 6d5542845dbd..1283237141ff 100644
--- a/packages/main/src/ComboBox.ts
+++ b/packages/main/src/ComboBox.ts
@@ -1243,7 +1243,7 @@ class ComboBox extends UI5Element implements IFormInputElement {
 	 * @private
 	 */
 	_highlightItem(item: ComboBoxItem) {
-		item.markupText = generateHighlightedMarkupFirstMatch(item.text, this.filterValue);
+		item.markupText = generateHighlightedMarkupFirstMatch(item.text || "", this.filterValue);
 	}
 
 	_getFirstMatchingItem(current: string): IComboBoxItem | void {
diff --git a/packages/main/src/ComboBoxPopoverTemplate.tsx b/packages/main/src/ComboBoxPopoverTemplate.tsx
index 9eb3f79ae584..a458e41bd0ce 100644
--- a/packages/main/src/ComboBoxPopoverTemplate.tsx
+++ b/packages/main/src/ComboBoxPopoverTemplate.tsx
@@ -60,11 +60,11 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 										return item.items
 											.filter(nestedItem => !!nestedItem)
 											.map(nestedItem =>
-												<SuggestionItem text={nestedItem.text} additional-text={nestedItem.additionalText} markupText={generateHighlightedMarkupFirstMatch(nestedItem.text, this.filterValue)}/>
+												<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)}/>;
+									return <SuggestionItem text={item.text} additional-text={item.additionalText} markupText={generateHighlightedMarkupFirstMatch(item.text || "", this.filterValue)}/>;
 								})}
 							</Input>
 						</div>