fix(ui5-search): show delete button on item hover (#11850)

Author: StefanDimitrov04

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

@@ -389,6 +389,32 @@ describe("Properties", () => {
 			.find("ui5-avatar")
 			.should("be.visible");
 	});
+
+	it("displays item's delete button on hover", () => {
+		cy.mount(
+			<Search>
+				<SearchItem text="Item 1"/>
+				<SearchItem text="Item 2"/>
+			</Search>
+		);
+
+		cy.get("[ui5-search]")
+			.shadow()
+			.find("input")
+			.realClick();
+
+		cy.realPress("I");
+
+		cy.get("[ui5-search-item]")
+			.eq(1)
+			.realHover();
+
+		cy.get("[ui5-search-item]")
+			.eq(1)
+			.shadow()
+			.find(".ui5-search-item-selected-delete")
+			.should("be.visible");
+	});
 });
 
 describe("Events", () => {

packages/fiori/src/SearchItemTemplate.tsx

@@ -43,9 +43,7 @@ export default function SearchFieldTemplate(this: SearchItem) {
 
 						<span part="subtitle" class="ui5-search-item-description">{this.description}</span>
 					</div>
-					{this.selected &&
-						<Button class="ui5-search-item-selected-delete" design={ButtonDesign.Transparent} icon={decline} onClick={this._onDeleteButtonClick}></Button>
-					}
+					<Button class="ui5-search-item-selected-delete" design={ButtonDesign.Transparent} icon={decline} onClick={this._onDeleteButtonClick}></Button>
 				</div>
 			</div>
 		</li >

packages/fiori/src/themes/SearchItem.css

@@ -29,7 +29,8 @@
 }
 
 :host([selected]:hover),
-:host(:focus-within) {
+:host(:focus-within),
+:host(:hover) {
 	.ui5-search-item-selected-delete {
 		display: inline-block;
 	}