From cc2d5c264ab39ab57b1bc5c72fba422bb481ee65 Mon Sep 17 00:00:00 2001
From: "Martin R. Hristov" <m.hristov@sap.com>
Date: Thu, 11 Dec 2025 16:11:46 +0200
Subject: [PATCH] fix(ui5-search-field): add scope-value property

---
 .../fiori/cypress/specs/SearchField.cy.tsx    | 42 +++++++++++++++++++
 packages/fiori/src/SearchField.ts             | 22 +++++++++-
 packages/fiori/src/SearchFieldTemplate.tsx    |  6 ++-
 packages/fiori/src/SearchScope.ts             |  9 ++--
 packages/fiori/test/pages/Search.html         | 10 ++---
 packages/fiori/test/pages/SearchField.html    |  8 ++--
 .../fiori/test/pages/ShellBar_evolution.html  |  8 ++--
 .../docs/_samples/fiori/Search/Basic/main.js  |  2 +-
 .../_samples/fiori/Search/Basic/sample.html   |  8 ++--
 .../patterns/UXCIntegration/Basic/main.js     |  2 +-
 .../patterns/UXCIntegration/Basic/sample.html |  8 ++--
 11 files changed, 95 insertions(+), 30 deletions(-)

diff --git a/packages/fiori/cypress/specs/SearchField.cy.tsx b/packages/fiori/cypress/specs/SearchField.cy.tsx
index 4461ccfea3d3..db80dffd555b 100644
--- a/packages/fiori/cypress/specs/SearchField.cy.tsx
+++ b/packages/fiori/cypress/specs/SearchField.cy.tsx
@@ -396,6 +396,48 @@ describe("SearchField general interaction", () => {
 				.should("have.length", 2);
 		});
 
+		it("preselected scope option should be applied", () => {
+			cy.mount(<SearchField scope-value="products" value="test">
+				<SearchScope text="Apps" value="apps" slot="scopes"></SearchScope>
+				<SearchScope text="Products" value="products" slot="scopes"></SearchScope>
+			</SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.shadow()
+				.find("[ui5-select]")
+				.as("select");
+
+			cy.get("@select")
+				.should("have.prop", "value", "products");
+		});
+
+		it("changes scope-value on option select", () => {
+			cy.mount(<SearchField value="test">
+				<SearchScope text="Apps" value="apps" slot="scopes"></SearchScope>
+				<SearchScope text="Products" value="products" slot="scopes"></SearchScope>
+			</SearchField>);
+
+			cy.get("[ui5-search-field]")
+				.as("searchfield");
+
+			cy.get("@searchfield")
+				.shadow()
+				.find("[ui5-select]")
+				.as("scope");
+
+			cy.get("@scope")
+				.realClick();
+
+			cy.get("@scope")
+				.realPress("ArrowDown");
+
+			cy.get("@scope")
+				.realPress("Enter");
+
+			cy.get("@searchfield")
+				.should("have.prop", "scopeValue", "products");
+		});
+
 		it("scope-change event should be fired, when a scope option is selected", () => {
 			cy.mount(<SearchField value="test">
 				<SearchScope text="Apps" slot="scopes"></SearchScope>
diff --git a/packages/fiori/src/SearchField.ts b/packages/fiori/src/SearchField.ts
index 2fa543c1147a..4956195e1b9d 100644
--- a/packages/fiori/src/SearchField.ts
+++ b/packages/fiori/src/SearchField.ts
@@ -28,7 +28,7 @@ import {
  */
 interface ISearchScope extends UI5Element {
 	text?: string,
-	selected: boolean,
+	value?: string,
 	stableDomRef: string,
 }
 
@@ -153,6 +153,20 @@ class SearchField extends UI5Element {
 	@property()
 	accessibleDescription?: string;
 
+	/**
+	 * Defines the value of the component:
+	 *
+	 * Applications are responsible for setting the correct scope value.
+	 *
+	 * **Note:** If the given value does not match any existing scopes,
+	 * no scope will be selected and the SearchField scope component will be displayed as empty.
+	 * @public
+	 * @default ""
+	 * @since 2.18.0
+	 */
+	@property()
+	scopeValue?: string;
+
 	/**
 	 * Defines the component scope options.
 	 * @public
@@ -241,6 +255,12 @@ class SearchField extends UI5Element {
 
 	_handleScopeChange(e: CustomEvent<SelectChangeEventDetail>) {
 		const item = e.detail.selectedOption as IOption & { scopeOption: ISearchScope };
+
+		// Set the scopeValue property if the selected scope has a value defined
+		if (item.value) {
+			this.scopeValue = item.value;
+		}
+
 		this.fireDecoratorEvent("scope-change", {
 			scope: item.scopeOption,
 		});
diff --git a/packages/fiori/src/SearchFieldTemplate.tsx b/packages/fiori/src/SearchFieldTemplate.tsx
index 8f593f613b9f..27335c257a7f 100644
--- a/packages/fiori/src/SearchFieldTemplate.tsx
+++ b/packages/fiori/src/SearchFieldTemplate.tsx
@@ -36,10 +36,12 @@ export default function SearchFieldTemplate(this: SearchField, options?: SearchF
 								onChange={this._handleScopeChange}
 								class="sapUiSizeCompact ui5-search-field-select"
 								accessibleName={this._translations.scope}
-								tooltip={this._translations.scope}>
+								tooltip={this._translations.scope}
+								value={this.scopeValue}
+							>
 								{this.scopes.map(scopeOption => (
 									<Option
-										selected={scopeOption.selected}
+										value={scopeOption.value}
 										data-ui5-stable={scopeOption.stableDomRef}
 										ref={this.captureRef.bind(scopeOption)}
 									>{scopeOption.text}
diff --git a/packages/fiori/src/SearchScope.ts b/packages/fiori/src/SearchScope.ts
index 22b06735ce51..c94232358557 100644
--- a/packages/fiori/src/SearchScope.ts
+++ b/packages/fiori/src/SearchScope.ts
@@ -25,12 +25,13 @@ class SearchScope extends UI5Element implements ISearchScope {
 	text!: string;
 
 	/**
-	 * Indicates whether the item is selected
-	 * @default false
+	 * Defines the value of the `ui5-search-scope`.
+	 * Used for selection in Search scopes.
+	 * @default undefined
 	 * @public
 	 */
-	@property({ type: Boolean })
-	selected!: boolean;
+	@property()
+	value?: string;
 
 	get stableDomRef() {
 		return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
diff --git a/packages/fiori/test/pages/Search.html b/packages/fiori/test/pages/Search.html
index bfb6f3f161d0..e05957aaeef8 100644
--- a/packages/fiori/test/pages/Search.html
+++ b/packages/fiori/test/pages/Search.html
@@ -213,10 +213,10 @@
 
 	<div class="container">
 		<ui5-label>Search with Scoped Suggestions - Filter by scope</ui5-label>
-		<ui5-search id="search-scope" show-clear-icon placeholder="Search Apps, Products">
-			<ui5-search-scope text="All" slot="scopes"></ui5-search-scope>
-			<ui5-search-scope text="Apps" selected slot="scopes"></ui5-search-scope>
-			<ui5-search-scope text="Products" slot="scopes"></ui5-search-scope>
+		<ui5-search id="search-scope" show-clear-icon scope-value="apps" placeholder="Search Apps, Products">
+			<ui5-search-scope text="All" value="all" slot="scopes"></ui5-search-scope>
+			<ui5-search-scope text="Apps" value="apps" slot="scopes"></ui5-search-scope>
+			<ui5-search-scope text="Products" value="products" slot="scopes"></ui5-search-scope>
 		</ui5-search>
 		<ui5-text style="padding-top: 0.25rem; font-style: italic;">The examples shows scoped search with scoped suggestions. Change scope to filter suggestions.</ui5-text>
 	</div>
@@ -324,7 +324,7 @@
 		const searchScope = document.getElementById('search-scope');
 		createScopeItems();
 		searchScope.addEventListener('ui5-scope-change', (event) => {
-			let scope = event.detail.scope.text === "All" ? "" : event.detail.scope.text.toLowerCase();
+			let scope = event.detail.scope.value === "all" ? "" : event.detail.scope.value;
 
 			searchScope.getSlottedNodes("items").forEach(item => {
 				item.remove();
diff --git a/packages/fiori/test/pages/SearchField.html b/packages/fiori/test/pages/SearchField.html
index ec17037d9cb4..029ad1d51a78 100644
--- a/packages/fiori/test/pages/SearchField.html
+++ b/packages/fiori/test/pages/SearchField.html
@@ -32,10 +32,10 @@
 	</div>
 	<div class="container" style="padding-top: 1rem; display: flex; flex-direction: column;">
 		<ui5-label>Initially expanded fixed search with scope and placeholder:</ui5-label>
-		<ui5-search-field accessible-name="Global Search" id="scoped-search" fixed expanded mode="Scoped" placeholder="Placeholder">
-			<ui5-search-scope text="All" slot="scopes"></ui5-search-scope>
-			<ui5-search-scope text="Apps" selected slot="scopes"></ui5-search-scope>
-			<ui5-search-scope text="Products" slot="scopes"></ui5-search-scope>
+		<ui5-search-field accessible-name="Global Search" id="scoped-search" scope-value="apps" fixed expanded mode="Scoped" placeholder="Placeholder">
+			<ui5-search-scope text="All" value="all" slot="scopes"></ui5-search-scope>
+			<ui5-search-scope text="Apps" value="apps" slot="scopes"></ui5-search-scope>
+			<ui5-search-scope text="Products" value="products" slot="scopes"></ui5-search-scope>
 		</ui5-search-field>
 	</div>
 	<ui5-label>Advanced filtering search</ui5-label>
diff --git a/packages/fiori/test/pages/ShellBar_evolution.html b/packages/fiori/test/pages/ShellBar_evolution.html
index d425a07b1f7d..74b31f09c158 100644
--- a/packages/fiori/test/pages/ShellBar_evolution.html
+++ b/packages/fiori/test/pages/ShellBar_evolution.html
@@ -139,7 +139,7 @@
 
 		<ui5-toggle-button  slot="content" text="PR9" data-hide-order="9">PR9</ui5-toggle-button>
 
-		<ui5-shellbar-search slot="searchField">
+		<ui5-shellbar-search slot="searchField" scope-value="apps">
 			<ui5-search-item text="List Item" icon="history" ></ui5-search-item>
 			<ui5-search-item text="List Item" icon="history" ></ui5-search-item>
 			<ui5-search-item text="List Item" icon="history" ></ui5-search-item>
@@ -148,9 +148,9 @@
 			<ui5-search-item text="List Item" icon="globe" ></ui5-search-item>
 			<ui5-search-item text="List Item" icon="globe" ></ui5-search-item>
 
-			<ui5-search-scope text="All" slot="scopes"></ui5-search-scope>
-			<ui5-search-scope text="Apps" selected slot="scopes"></ui5-search-scope>
-			<ui5-search-scope text="Products" slot="scopes"></ui5-search-scope>
+			<ui5-search-scope text="All" value="all" slot="scopes"></ui5-search-scope>
+			<ui5-search-scope text="Apps" value="apps" slot="scopes"></ui5-search-scope>
+			<ui5-search-scope text="Products" value="products" slot="scopes"></ui5-search-scope>
 		</ui5-shellbar-search>
 
 		<ui5-avatar slot="profile" icon="customer"></ui5-avatar>
diff --git a/packages/website/docs/_samples/fiori/Search/Basic/main.js b/packages/website/docs/_samples/fiori/Search/Basic/main.js
index f0901419d4e0..3b21561d563d 100644
--- a/packages/website/docs/_samples/fiori/Search/Basic/main.js
+++ b/packages/website/docs/_samples/fiori/Search/Basic/main.js
@@ -34,7 +34,7 @@ const searchScope = document.getElementById("search-scope");
 createScopeItems();
 
 searchScope.addEventListener("ui5-scope-change", (event) => {
-    const scope = event.detail.scope.text === "All" ? "" : event.detail.scope.text.toLowerCase();
+    const scope = event.detail.scope.value === "all" ? "" : event.detail.scope.value;
     
     searchScope.items.forEach(item => {
         item.remove();
diff --git a/packages/website/docs/_samples/fiori/Search/Basic/sample.html b/packages/website/docs/_samples/fiori/Search/Basic/sample.html
index ba22b4032cd2..94aaa6e33413 100644
--- a/packages/website/docs/_samples/fiori/Search/Basic/sample.html
+++ b/packages/website/docs/_samples/fiori/Search/Basic/sample.html
@@ -10,10 +10,10 @@
 
 <body style="background-color: var(--sapBackgroundColor); height: 350px">
 		<!-- playground-fold-end -->
-		<ui5-search id="search-scope" show-clear-icon placeholder="Search Apps, Products">
-			<ui5-search-scope text="All" selected slot="scopes"></ui5-search-scope>
-			<ui5-search-scope text="Apps" slot="scopes"></ui5-search-scope>
-			<ui5-search-scope text="Products" slot="scopes"></ui5-search-scope>
+		<ui5-search id="search-scope" scope-value="all" show-clear-icon placeholder="Search Apps, Products">
+			<ui5-search-scope text="All" value="all" slot="scopes"></ui5-search-scope>
+			<ui5-search-scope text="Apps" value="apps" slot="scopes"></ui5-search-scope>
+			<ui5-search-scope text="Products" value="products" slot="scopes"></ui5-search-scope>
 		</ui5-search>
 	</div>
 		<!-- playground-fold -->
diff --git a/packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.js b/packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.js
index 64b547fbb485..a2d8939a79b1 100644
--- a/packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.js
+++ b/packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.js
@@ -408,7 +408,7 @@ const searchScope = document.getElementById("search-scope");
 createScopeItems();
 
 searchScope.addEventListener("ui5-scope-change", (event) => {
-    const scope = event.detail.scope.text === "All" ? "" : event.detail.scope.text.toLowerCase();
+    const scope = event.detail.scope.value === "all" ? "" : event.detail.scope.value;
 
     searchScope.items.forEach(item => {
         item.remove();
diff --git a/packages/website/docs/_samples/patterns/UXCIntegration/Basic/sample.html b/packages/website/docs/_samples/patterns/UXCIntegration/Basic/sample.html
index 2466dbadc139..7c26ef2ef130 100644
--- a/packages/website/docs/_samples/patterns/UXCIntegration/Basic/sample.html
+++ b/packages/website/docs/_samples/patterns/UXCIntegration/Basic/sample.html
@@ -40,10 +40,10 @@
 
             <ui5-toggle-button icon="sap-icon://da" slot="assistant"></ui5-toggle-button>
 
-			<ui5-shellbar-search slot="searchField" id="search-scope" show-clear-icon placeholder="Search Apps, Products">
-				<ui5-search-scope text="All" selected slot="scopes"></ui5-search-scope>
-				<ui5-search-scope text="Apps" slot="scopes"></ui5-search-scope>
-				<ui5-search-scope text="Products" slot="scopes"></ui5-search-scope>
+			<ui5-shellbar-search slot="searchField" id="search-scope" scope-value="all" show-clear-icon placeholder="Search Apps, Products">
+				<ui5-search-scope text="All" value="all" slot="scopes"></ui5-search-scope>
+				<ui5-search-scope text="Apps" value="apps" slot="scopes"></ui5-search-scope>
+				<ui5-search-scope text="Products" value="products" slot="scopes"></ui5-search-scope>
 			</ui5-shellbar-search>
 
             <ui5-shellbar-item icon="sys-help" text="Help"></ui5-shellbar-item>