[ACS-7363] Search - Advanced Filters - visual bugs in Logic and Properties filters (#9914)

lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html

@@ -19,6 +19,7 @@
             placeholder="{{ placeholder | translate }}"
             aria-controls="adf-search-chip-autocomplete"
             #optionInput
+            #autocompleteTrigger="matAutocompleteTrigger"
             [formControl]="formCtrl"
             [matAutocomplete]="auto"
             [matChipInputFor]="chipList"
@@ -26,7 +27,7 @@
             [attr.aria-label]="placeholder | translate"
             class="adf-search-properties-file-input"
             (matChipInputTokenEnd)="add($event)"
-            (blur)="activeAnyOption = false"
+            (blur)="activeAnyOption = false; autocompleteTrigger.closePanel()"
             data-automation-id="adf-search-chip-autocomplete-input">
     </mat-chip-grid>
     <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)" id="adf-search-chip-autocomplete"

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"
+            [attr.aria-label]="('SEARCH.LOGICAL_SEARCH.' + field + '_HINT') | translate"/>
-            (change)="onInputChange()"/>
     </div>
 </div>

lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.spec.ts

@@ -99,13 +99,14 @@ describe('SearchLogicalFilterComponent', () => {
         expect(component.hasValidValue()).toBeTrue();
     });
 
-    it('should update display value after phrases changes', () => {
+    it('should update display value after phrases changes and user user clicks submit', () => {
         spyOn(component.displayValue$, 'next');
         enterNewPhrase('test2', 0);
+        component.submitValues();
         expect(component.displayValue$.next).toHaveBeenCalledOnceWith(` SEARCH.LOGICAL_SEARCH.${Object.keys(LogicalSearchFields)[0]}: test2`);
     });
 
-    it('should have correct display value after each field has at least one phrase', () => {
+    it('should have correct display value after each field has at least one phrase and user clicks submit', () => {
         spyOn(component.displayValue$, 'next');
         enterNewPhrase('test1', 0);
         enterNewPhrase('test2', 1);
@@ -115,6 +116,7 @@ describe('SearchLogicalFilterComponent', () => {
         const displayVal2 = ` SEARCH.LOGICAL_SEARCH.${Object.keys(LogicalSearchFields)[1]}: test2`;
         const displayVal3 = ` SEARCH.LOGICAL_SEARCH.${Object.keys(LogicalSearchFields)[2]}: test3`;
         const displayVal4 = ` SEARCH.LOGICAL_SEARCH.${Object.keys(LogicalSearchFields)[3]}: test4`;
+        component.submitValues();
         expect(component.displayValue$.next).toHaveBeenCalledWith(displayVal1 + displayVal2 + displayVal4 + displayVal3);
     });
 

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,14 +55,10 @@ 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] !== '') {
@@ -88,11 +84,15 @@ 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) => {
+                            this.searchCondition[key]
+                                .split(' ')
+                                .filter((condition: string) => condition !== '')
+                                .forEach((phrase: string) => {
                                     const refinedPhrase = '"' + phrase + '"';
-                                fieldQuery += fieldQuery === '(' ?
+                                    fieldQuery +=
-                                    `${key === LogicalSearchFields.EXCLUDE ? 'NOT ' : ''}${field}${refinedPhrase}` :
+                                        fieldQuery === '('
-                                    ` ${connector} ${field}${refinedPhrase}`;
+                                            ? `${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();
         }
     }