From 592cbfdf488ee5c536057da6e910570da53a16b7 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Wed, 6 Apr 2022 12:53:26 +0300
Subject: [PATCH] Input: Fix a bug with on click event and search reset value

---
 sharedComponents/input/input.component.ts | 24 ++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/sharedComponents/input/input.component.ts b/sharedComponents/input/input.component.ts
index 99a15948..75985123 100644
--- a/sharedComponents/input/input.component.ts
+++ b/sharedComponents/input/input.component.ts
@@ -105,7 +105,7 @@ declare var UIkit;
         </div>
       </div>
       <div class="options uk-dropdown" *ngIf="filteredOptions && filteredOptions.length > 0 && opened" #optionBox
-           uk-dropdown="pos: bottom-justify; mode: click; offset: 15; boundary-align: true;" [attr.boundary]="'#' + id">
+           uk-dropdown="pos: bottom-justify; mode: none; offset: 15; boundary-align: true;" [attr.boundary]="'#' + id">
         <ul class="uk-nav uk-dropdown-nav">
           <li *ngFor="let option of filteredOptions; let i=index" [class.uk-active]="(formControl.value === option.value) || selectedIndex === i"
               [attr.uk-tooltip]="(tooltip)?('title: ' + option.label + ';'):null">
@@ -237,19 +237,19 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
   @HostListener('window:keydown', ['$event'])
   keyEvent(event: KeyboardEvent) {
     if(this.opened) {
-      if(event.key === 'ArrowUp') {
+      if(event.code === 'ArrowUp') {
         event.preventDefault();
         if(this.selectedIndex > 0) {
           this.selectedIndex--;
           this.optionBox.nativeElement.scrollBy(0, -34);
         }
-      } else if(event.key === 'ArrowDown') {
+      } else if(event.code === 'ArrowDown') {
         event.preventDefault();
         if(this.selectedIndex < (this.filteredOptions.length - 1)) {
           this.selectedIndex++;
           this.optionBox.nativeElement.scrollBy(0, 34);
         }
-      } else if(event.key === 'Enter') {
+      } else if(event.code === 'Enter') {
         event.preventDefault();
         if(this.filteredOptions[this.selectedIndex]) {
           this.selectOption(this.filteredOptions[this.selectedIndex], event);
@@ -261,7 +261,9 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
   
   @HostListener('document:click', ['$event'])
   click(event) {
-    this.focus(this.inputBox && this.inputBox.nativeElement.contains(event.target), event);
+    if(event.isTrusted) {
+      this.focus(this.inputBox && this.inputBox.nativeElement.contains(event.target), event);
+    }
   }
   
   ngOnInit() {
@@ -333,7 +335,9 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
       if (!this.searchControl) {
         this.searchControl = new FormControl('', this.validators);
       }
-      this.searchControl.setValue(this.getLabel(this.formControl.value));
+      if(this.formAsControl) {
+        this.searchControl.setValue(this.getLabel(this.formControl.value));
+      }
       this.subscriptions.push(this.searchControl.valueChanges.subscribe(value => {
         this.filteredOptions = this.filter(value);
         this.cdr.detectChanges();
@@ -360,8 +364,8 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
       } else {
         this.formControl.markAsDirty();
       }
-      if (this.searchControl) {
-        this.searchControl.setValue(this.type === 'autocomplete' ? this.getLabel(this.formControl.value) : null);
+      if (this.searchControl && this.formAsControl) {
+        this.searchControl.setValue(this.getLabel(this.formControl.value));
       }
       this.valueChange.emit(this.formControl.value);
     }));
@@ -446,7 +450,9 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
     } else {
       this.open(false);
       if (this.searchControl) {
-        this.searchControl.setValue(this.getLabel(this.formControl.value));
+        if(this.formAsControl) {
+          this.searchControl.setValue(this.getLabel(this.formControl.value));
+        }
         this.add(event);
       }
     }