[ACS-4130] Added feature to auto select first option from autocomplet…

…e dropdown when user focuses out of autocomplete input field
Alfresco · Oct 5, 2023 · f9aaf64 · f9aaf64
1 parent 4ce2d9a
commit f9aaf64
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 0 deletions.
diff --git a/...-content/folder-rules/src/rule-details/conditions/rule-simple-condition.ui-component.html b/...-content/folder-rules/src/rule-details/conditions/rule-simple-condition.ui-component.html
@@ -33,11 +33,14 @@
           matInput
           [matAutocomplete]="auto"
           formControlName="parameter"
+          (focusout)="autoSelectValidOption()"
           data-automation-id="auto-complete-input-field"
         />
         <mat-autocomplete
           #auto="matAutocomplete"
           data-automation-id="folder-rule-autocomplete"
+          [autoActiveFirstOption]="true"
+          [autoSelectActiveOption]="true"
           [displayWith]="autoCompleteDisplayFunction">
             <mat-option disabled *ngIf="showLoadingSpinner; else optionList">
               <span class="aca-rule-simple-condition__autocomplete-loading-spinner">

diff --git a/...ntent/folder-rules/src/rule-details/conditions/rule-simple-condition.ui-component.spec.ts b/...ntent/folder-rules/src/rule-details/conditions/rule-simple-condition.ui-component.spec.ts
@@ -333,4 +333,17 @@ describe('RuleSimpleConditionUiComponent', () => {
     expect(displayValue).toBe('category/path/1/FakeCategory1');
     discardPeriodicTasks();
   }));
+
+  it('should automatically select first category when user focuses out of parameter form field with category option selected', fakeAsync(() => {
+    spyOn(categoryService, 'searchCategories').and.returnValue(of(fakeCategoriesList));
+    fixture.detectChanges();
+    changeMatSelectValue('field-select', 'category');
+    tick(500);
+    const autoCompleteInputField = getByDataAutomationId('auto-complete-input-field')?.nativeElement;
+    autoCompleteInputField.value = 'FakeCat';
+    autoCompleteInputField.dispatchEvent(new Event('focusout'));
+    const parameterValue = fixture.componentInstance.form.get('parameter').value;
+    expect(parameterValue).toEqual(fakeCategoriesList.list.entries[0].entry.id);
+    discardPeriodicTasks();
+  }));
 });
diff --git a/...ca-content/folder-rules/src/rule-details/conditions/rule-simple-condition.ui-component.ts b/...ca-content/folder-rules/src/rule-details/conditions/rule-simple-condition.ui-component.ts
@@ -243,4 +243,12 @@ export class RuleSimpleConditionUiComponent implements OnInit, ControlValueAcces
 
   autoCompleteDisplayFunction: (id: string) => string = (optionValue) =>
     optionValue && this.autoCompleteOptions ? this.autoCompleteOptions.find((option) => option.value === optionValue)?.displayLabel : optionValue;
+
+  autoSelectValidOption() {
+    const currentValue = this.parameterControl.value;
+    const isValidValueSelected = !!this.autoCompleteOptions?.find((option) => option.value === currentValue);
+    if (!isValidValueSelected) {
+      this.parameterControl.setValue(this.autoCompleteOptions?.[0].value);
+    }
+  }
 }