From d1ff570b0a8121a94c9e2de766328d5810849649 Mon Sep 17 00:00:00 2001
From: Jacek Pluta <jacek.pluta@hyland.com>
Date: Tue, 2 Jul 2024 23:32:28 +0200
Subject: [PATCH] [ACS-7363] Search - Advanced Filters - visual bugs in Logic
 and Properties filters

---
 ...rch-chip-autocomplete-input.component.html |  2 +-
 ...earch-chip-autocomplete-input.component.ts |  5 +++-
 .../search-logical-filter.component.html      |  3 +-
 .../search-logical-filter.component.ts        | 28 ++++++++++---------
 4 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html b/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html
index 08d17d8f5ae..abb06117d7a 100644
--- a/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html
+++ b/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html
@@ -26,7 +26,7 @@
             [attr.aria-label]="placeholder | translate"
             class="adf-search-properties-file-input"
             (matChipInputTokenEnd)="add($event)"
-            (blur)="activeAnyOption = false"
+            (blur)="activeAnyOption = false; autocomplete.closePanel()"
             data-automation-id="adf-search-chip-autocomplete-input">
     </mat-chip-grid>
     <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)" id="adf-search-chip-autocomplete"
diff --git a/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.ts b/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.ts
index b3e57fdcd25..640b061769b 100644
--- a/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.ts
+++ b/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.ts
@@ -30,7 +30,7 @@ import {
 } from '@angular/core';
 import { ENTER } from '@angular/cdk/keycodes';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { MatAutocompleteModule, MatAutocompleteSelectedEvent, MatAutocompleteTrigger } from '@angular/material/autocomplete';
 import { MatChipInputEvent, MatChipsModule } from '@angular/material/chips';
 import { EMPTY, Observable, Subject, timer } from 'rxjs';
 import { debounce, startWith, takeUntil, tap } from 'rxjs/operators';
@@ -52,6 +52,9 @@ export class SearchChipAutocompleteInputComponent implements OnInit, OnDestroy,
     @ViewChild('optionInput')
     optionInput: ElementRef<HTMLInputElement>;
 
+    @ViewChild(MatAutocompleteTrigger)
+    autocomplete: MatAutocompleteTrigger;
+
     @Input()
     autocompleteOptions: AutocompleteOption[] = [];
 
diff --git a/lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.html b/lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.html
index 4ba39e54bcc..29297f4593a 100644
--- a/lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.html
+++ b/lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.html
@@ -4,7 +4,6 @@
         <input type="text"
             [(ngModel)]="searchCondition[LogicalSearchFields[field]]"
             placeholder="{{ ('SEARCH.LOGICAL_SEARCH.' + field + '_HINT') | translate }}"
-            [attr.aria-label]="('SEARCH.LOGICAL_SEARCH.' + field + '_HINT') | translate"
-            (change)="onInputChange()"/>
+            [attr.aria-label]="('SEARCH.LOGICAL_SEARCH.' + field + '_HINT') | translate"/>
     </div>
 </div>
diff --git a/lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.ts b/lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.ts
index 9ed3b01efa7..581e5353540 100644
--- a/lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.ts
+++ b/lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.ts
@@ -29,7 +29,7 @@ export enum LogicalSearchFields {
     MATCH_EXACT = 'matchExact'
 }
 
-export type LogicalSearchConditionEnumValuedKeys = { [T in LogicalSearchFields]: string; };
+export type LogicalSearchConditionEnumValuedKeys = { [T in LogicalSearchFields]: string };
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface LogicalSearchCondition extends LogicalSearchConditionEnumValuedKeys {}
 
@@ -55,20 +55,16 @@ export class SearchLogicalFilterComponent implements SearchWidget, OnInit {
         this.clearSearchInputs();
     }
 
-    onInputChange() {
-        this.updateDisplayValue();
-    }
-
     submitValues() {
         if (this.hasValidValue() && this.id && this.context && this.settings && this.settings.field) {
             this.updateDisplayValue();
-            const fields = this.settings.field.split(',').map((field) => field += ':');
+            const fields = this.settings.field.split(',').map((field) => (field += ':'));
             let query = '';
             Object.keys(this.searchCondition).forEach((key) => {
                 if (this.searchCondition[key] !== '') {
                     let connector = '';
                     let subQuery = '';
-                    switch(key) {
+                    switch (key) {
                         case LogicalSearchFields.MATCH_ALL:
                         case LogicalSearchFields.MATCH_EXACT:
                             connector = 'AND';
@@ -88,12 +84,16 @@ export class SearchLogicalFilterComponent implements SearchWidget, OnInit {
                         if (key === LogicalSearchFields.MATCH_EXACT) {
                             fieldQuery += field + '"' + this.searchCondition[key].trim() + '"';
                         } else {
-                            this.searchCondition[key].split(' ').filter((condition: string) => condition !== '').forEach((phrase: string) => {
-                                const refinedPhrase = '"' + phrase + '"';
-                                fieldQuery += fieldQuery === '(' ?
-                                    `${key === LogicalSearchFields.EXCLUDE ? 'NOT ' : ''}${field}${refinedPhrase}` :
-                                    ` ${connector} ${field}${refinedPhrase}`;
-                            });
+                            this.searchCondition[key]
+                                .split(' ')
+                                .filter((condition: string) => condition !== '')
+                                .forEach((phrase: string) => {
+                                    const refinedPhrase = '"' + phrase + '"';
+                                    fieldQuery +=
+                                        fieldQuery === '('
+                                            ? `${key === LogicalSearchFields.EXCLUDE ? 'NOT ' : ''}${field}${refinedPhrase}`
+                                            : ` ${connector} ${field}${refinedPhrase}`;
+                                });
                         }
                         subQuery += `${fieldQuery})`;
                     });
@@ -103,6 +103,8 @@ export class SearchLogicalFilterComponent implements SearchWidget, OnInit {
             });
             this.context.queryFragments[this.id] = query;
             this.context.update();
+        } else {
+            this.reset();
         }
     }