diff --git a/packages/fiori/cypress/specs/ShellBar.cy.tsx b/packages/fiori/cypress/specs/ShellBar.cy.tsx index b025dc614a0a5..a17625e7a83b1 100644 --- a/packages/fiori/cypress/specs/ShellBar.cy.tsx +++ b/packages/fiori/cypress/specs/ShellBar.cy.tsx @@ -541,6 +541,33 @@ describe("Slots", () => { cy.get("#search").should("have.prop", "collapsed", true); }); + it("Test pressing Enter on empty search collapses it and keeps ShellBar state in sync", () => { + cy.mount( + + + + ); + + // Initially expanded, ShellBar reflects the expanded state + cy.get("#search").should("have.prop", "collapsed", false); + cy.get("#shellbar").invoke("prop", "showSearchField").should("equal", true); + + // Focus the input and press Enter without a value + cy.get("#search") + .shadow() + .find("input") + .realClick(); + + cy.get("#search") + .shadow() + .find("input") + .realPress("Enter"); + + // The search collapses AND the ShellBar's own state collapses in sync + cy.get("#search").should("have.prop", "collapsed", true); + cy.get("#shellbar").invoke("prop", "showSearchField").should("equal", false); + }); + it("Test showSearchField property is false when using collapsed search field", () => { cy.mount( diff --git a/packages/fiori/src/ShellBarSearch.ts b/packages/fiori/src/ShellBarSearch.ts index 7b2d1923d4c71..75b7f8348bdfe 100644 --- a/packages/fiori/src/ShellBarSearch.ts +++ b/packages/fiori/src/ShellBarSearch.ts @@ -56,6 +56,9 @@ class ShellBarSearch extends Search { _handleEnter() { if (!this.value && !this.collapsed) { + // Fire `ui5-search` so a host ShellBar collapses in sync; also collapse + // locally for standalone usage (host converges on the same state). + this._handleSearchEvent(); this.collapsed = true; setTimeout(() => {