diff --git a/packages/fiori/cypress/specs/SearchField.cy.tsx b/packages/fiori/cypress/specs/SearchField.cy.tsx index b1398b77f721..dcd87637cc9f 100644 --- a/packages/fiori/cypress/specs/SearchField.cy.tsx +++ b/packages/fiori/cypress/specs/SearchField.cy.tsx @@ -1,3 +1,4 @@ +import Button from "@ui5/webcomponents/dist/Button.js"; import SearchField from "../../src/SearchField.js"; import SearchScope from "../../src/SearchScope.js"; import { @@ -405,4 +406,43 @@ describe("SearchField general interaction", () => { .should("have.been.calledOnce"); }); }); + + describe("SearchField - Advanced and Scope Slot Rendering", () => { + it("renders the advanced slot content when only advanced filtering is provided", () => { + cy.mount( + + + + ); + + cy.get("ui5-search-field").as("searchField"); + + cy.get("@searchField") + .shadow() + .find('slot[name="advanced"]') + .should("exist"); + }); + + it("renders the scope selector and omits advanced slot when both are provided", () => { + cy.mount( + + + + + + ); + + cy.get("ui5-search-field").as("searchField"); + + cy.get("@searchField") + .shadow() + .find("ui5-select") + .should("exist"); + + cy.get("@searchField") + .shadow() + .find('slot[name="advanced"]') + .should("not.exist"); + }); + }); }); diff --git a/packages/fiori/src/SearchField.ts b/packages/fiori/src/SearchField.ts index eb80edb98c18..59f76a938cc4 100644 --- a/packages/fiori/src/SearchField.ts +++ b/packages/fiori/src/SearchField.ts @@ -158,6 +158,9 @@ class SearchField extends UI5Element { @slot({ type: HTMLElement, individualSlots: true, invalidateOnChildChange: true }) scopes!: Array; + @slot() + advanced!: HTMLElement; + /** * @private */ diff --git a/packages/fiori/src/SearchFieldTemplate.tsx b/packages/fiori/src/SearchFieldTemplate.tsx index 5f0be6805098..c7695ec2d30d 100644 --- a/packages/fiori/src/SearchFieldTemplate.tsx +++ b/packages/fiori/src/SearchFieldTemplate.tsx @@ -23,25 +23,30 @@ export default function SearchFieldTemplate(this: SearchField) { ) : ( - {!!this.scopes.length && + {this.scopes?.length ? ( <> - {this.scopes.map(scopeOption => { - return ( + {scopeOption.text}; - }, - this)} + >{scopeOption.text} + + ))} > - } + ) : this.advanced ? ( + <> + + + > + ) : null} + advanced filtering search + + + Collapsed search