fix(ui5-shellbar-search): restore focus on button when collapsed (#13523)

Author: niyap

packages/fiori/cypress/specs/ShellBarSearch.cy.tsx

@@ -76,4 +76,36 @@ describe("Behaviour", () => {
 		cy.get("[ui5-shellbar-search]")
 			.should("have.prop", "open", true);
 	});
+
+	it("should collapse and focus the button when Enter is pressed without value", () => {
+		cy.mount(
+			<ShellBarSearch/>
+		);
+
+		// Initially expanded
+		cy.get("[ui5-shellbar-search]")
+			.should("have.prop", "collapsed", false);
+
+		// Focus the input
+		cy.get("[ui5-shellbar-search]")
+			.shadow()
+			.find("input")
+			.realClick();
+
+		// Press Enter without value
+		cy.get("[ui5-shellbar-search]")
+			.shadow()
+			.find("input")
+			.realPress("Enter");
+
+		// Should be collapsed
+		cy.get("[ui5-shellbar-search]")
+			.should("have.prop", "collapsed", true);
+
+		// Focus should be on the search button
+		cy.get("[ui5-shellbar-search]")
+			.shadow()
+			.find("[ui5-button]")
+			.should("have.focus");
+	});
 });

packages/fiori/src/ShellBarSearch.ts

@@ -53,6 +53,18 @@ class ShellBarSearch extends Search {
 		}
 	}
 
+	_handleEnter() {
+		if (!this.value && !this.collapsed) {
+			this.collapsed = true;
+
+			setTimeout(() => {
+				this.focus();
+			}, 0);
+		} else {
+			super._handleEnter();
+		}
+	}
+
 	_onFocusOutSearch(e: FocusEvent) {
 		if (isPhone()) {
 			return;