fix(ui5-search): deselect item on delete/backspace (#12215)

Author: MapTo0

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

@@ -890,6 +890,75 @@ describe("Events", () => {
 		cy.get("ui5-search-item")
 			.should("not.exist")
 	});
+
+	it("should deselect items when backspace or delete key is pressed", () => {
+		cy.mount(
+			<Search>
+				<SearchItem text="Item 1" icon={history} />
+				<SearchItem text="Item 2" icon={searchIcon} />
+				<SearchItem text="Item 3" icon={history} />
+			</Search>
+		);
+
+		cy.get("[ui5-search]")
+			.shadow()
+			.find("input")
+			.realClick();
+
+		cy.get("[ui5-search]")
+			.shadow()
+			.find("input")
+			.realPress("I");
+
+		cy.get("ui5-search-item").eq(0)
+			.should("have.attr", "selected");
+
+		// Press backspace and verify item is deselected
+		cy.get("[ui5-search]")
+			.shadow()
+			.find("input")
+			.realPress("Backspace");
+
+		cy.get("ui5-search-item").eq(0)
+			.should("not.have.attr", "selected");
+	});
+
+	it("should handle backspace and delete keys with grouped items", () => {
+		cy.mount(
+			<Search>
+				<SearchItemGroup headerText="Group 1">
+					<SearchItem text="Group 1 Item 1" icon={history} />
+					<SearchItem text="Group 1 Item 2" icon={searchIcon} />
+				</SearchItemGroup>
+				<SearchItemGroup headerText="Group 2">
+					<SearchItem text="Group 2 Item 1" icon={history} />
+					<SearchItem text="Group 2 Item 2" icon={searchIcon} />
+				</SearchItemGroup>
+			</Search>
+		);
+
+		cy.get("[ui5-search]")
+			.shadow()
+			.find("input")
+			.realClick();
+
+		cy.get("[ui5-search]")
+			.shadow()
+			.find("input")
+			.realPress("G");
+
+		cy.get("ui5-search-item").eq(0)
+			.should("have.attr", "selected");
+
+		// Press backspace and verify item is deselected
+		cy.get("[ui5-search]")
+			.shadow()
+			.find("input")
+			.realPress("Backspace");
+
+		cy.get("ui5-search-item").eq(0)
+			.should("not.have.attr", "selected");
+	});
 });
 
 describe("Accessibility", () => {

packages/fiori/src/Search.ts

@@ -487,6 +487,11 @@ class Search extends SearchField {
 		if (isEscape(e)) {
 			this._handleEscape();
 		}
+
+		// deselect item on backspace or delete
+		if (isBackSpace(e) || isDelete(e)) {
+			this._deselectItems();
+		}
 	}
 
 	_onFocusOutSearch(e:FocusEvent) {