From 3406341859c6b4d147cb3577db2837b672ec96d1 Mon Sep 17 00:00:00 2001
From: MichalKinas <113341662+MichalKinas@users.noreply.github.com>
Date: Tue, 6 Aug 2024 15:28:09 +0200
Subject: [PATCH] [ACS-8514] Use proper icon button in search text input
 (#10050)

* [ACS-8514] Use proper icon button in search text input

* [ACS-8514] Adapt unit tests
---
 .../search-text/search-text-input.component.html  | 15 +++++++++++----
 .../search-text-input.component.spec.ts           | 12 ++++++------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/lib/core/src/lib/search-text/search-text-input.component.html b/lib/core/src/lib/search-text/search-text-input.component.html
index d7becee74a..3d2cff5da6 100644
--- a/lib/core/src/lib/search-text/search-text-input.component.html
+++ b/lib/core/src/lib/search-text/search-text-input.component.html
@@ -1,6 +1,7 @@
 <div class="adf-search-container" [attr.state]="subscriptAnimationState.value">
-    <div [@transitionMessages]="subscriptAnimationState"
-         (@transitionMessages.done)="applySearchFocus($event)">
+    <div class="adf-search-container-transition"
+        [@transitionMessages]="subscriptAnimationState"
+        (@transitionMessages.done)="applySearchFocus($event)">
         <button mat-icon-button
                 *ngIf="expandable"
                 id="adf-search-button"
@@ -27,10 +28,16 @@
                    (ngModelChange)="inputChange($event)"
                    [searchAutocomplete]="searchAutocomplete ? searchAutocomplete : null"
                    (keyup.enter)="searchSubmit($event)">
-                <mat-icon *ngIf="canShowClearSearch()" matSuffix
+                <button mat-icon-button
+                    *ngIf="canShowClearSearch()"
+                    matSuffix
                     data-automation-id="adf-clear-search-button"
                     class="adf-clear-search-button"
-                    (mousedown)="resetSearch()">clear</mat-icon>
+                    [title]="'SEARCH.FILTER.BUTTONS.CLOSE' | translate"
+                    (click)="resetSearch()"
+                    (keyup.enter)="resetSearch()">
+                    <mat-icon>close</mat-icon>
+                </button>
         </mat-form-field>
     </div>
 </div>
diff --git a/lib/core/src/lib/search-text/search-text-input.component.spec.ts b/lib/core/src/lib/search-text/search-text-input.component.spec.ts
index bf8732d4e9..fba1188957 100644
--- a/lib/core/src/lib/search-text/search-text-input.component.spec.ts
+++ b/lib/core/src/lib/search-text/search-text-input.component.spec.ts
@@ -301,21 +301,22 @@ describe('SearchTextInputComponent', () => {
                 tick(200);
             }));
 
+            const getClearSearchButton = (): HTMLButtonElement =>
+                fixture.debugElement.query(By.css('[data-automation-id="adf-clear-search-button"]'))?.nativeElement;
+
             it('should clear button be visible when showClearButton is set to true', async () => {
                 component.showClearButton = true;
                 fixture.detectChanges();
                 await fixture.whenStable();
-                const clearButton = fixture.debugElement.query(By.css('[data-automation-id="adf-clear-search-button"]'));
 
-                expect(clearButton).not.toBeNull();
+                expect(getClearSearchButton()).toBeDefined();
             });
 
             it('should clear button not be visible when showClearButton is set to false', () => {
                 component.showClearButton = false;
                 fixture.detectChanges();
-                const clearButton = fixture.debugElement.query(By.css('[data-automation-id="adf-clear-search-button"]'));
 
-                expect(clearButton).toBeNull();
+                expect(getClearSearchButton()).toBeUndefined();
             });
 
             it('should reset the search when clicking the clear button', async () => {
@@ -327,8 +328,7 @@ describe('SearchTextInputComponent', () => {
                 fixture.detectChanges();
                 await fixture.whenStable();
 
-                const clearButton = fixture.debugElement.query(By.css('[data-automation-id="adf-clear-search-button"]'));
-                clearButton.nativeElement.dispatchEvent(new MouseEvent('mousedown'));
+                getClearSearchButton().click();
                 fixture.detectChanges();
                 await fixture.whenStable();