fix(ui5-search-field): add scope-value property (#12795)

Author: MapTo0

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>

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,
 		});

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}

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`;

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();

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>

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>

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();

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 -->

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();