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( + + + ); + + 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( + + + ); + + 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( 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) { 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 => ( {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 @@ Search with Scoped Suggestions - Filter by scope - - - - + + + + The examples shows scoped search with scoped suggestions. Change scope to filter suggestions. @@ -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 @@ Initially expanded fixed search with scope and placeholder: - - - - + + + + Advanced filtering search 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 @@ PR9 - + @@ -148,9 +148,9 @@ - - - + + + 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 @@ - - - - + + + + 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 @@ - - - - + + + +