From 35ccd215a18eb28a5aa0e9521807ad3e317fde23 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@d315682c-612b-4755-9ff5-7f18f6832af3>
Date: Wed, 24 Feb 2021 16:53:31 +0000
Subject: [PATCH] [Library | Trunk]: Input component: Dropdown under search
 input for chips.

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@60489 d315682c-612b-4755-9ff5-7f18f6832af3
---
 sharedComponents/input/input.component.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/sharedComponents/input/input.component.ts b/sharedComponents/input/input.component.ts
index bce8102c..ffd4c6c9 100644
--- a/sharedComponents/input/input.component.ts
+++ b/sharedComponents/input/input.component.ts
@@ -96,12 +96,13 @@ export interface Option {
                 </mat-chip>
                 <div class="uk-width-expand uk-position-relative chip-input">
                   <input #searchInput class="uk-width-1-1" [formControl]="searchControl" [matAutocomplete]="auto"
-                         [matChipInputFor]="chipList"
+                         [matChipInputFor]="chipList" [matAutocompleteConnectedTo]="origin"
                          [matChipInputAddOnBlur]="addExtraChips && searchControl.value"
                          (matChipInputTokenEnd)="add($event)">
                   <div *ngIf="placeholder && !searchControl.value" class="placeholder uk-width-1-1"
                        (click)="searchInput.focus()">{{placeholder}}</div>
                 </div>
+                <div class="uk-width-1-1 uk-invisible" matAutocompleteOrigin #origin="matAutocompleteOrigin"></div>
               </mat-chip-list>
               <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)" [class]="panelClass" [panelWidth]="panelWidth">
                 <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">
@@ -149,6 +150,7 @@ export class InputComponent implements OnInit, OnDestroy, OnChanges {
   @Input() smallChip: boolean = false;
   @Input() panelWidth: number = 300;
   @Input() panelClass: string = null;
+  @Input() showOptionsOnEmpty: boolean = true;
   @Output() focusEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
   /** Internal basic information */
   public required: boolean = false;
@@ -250,7 +252,7 @@ export class InputComponent implements OnInit, OnDestroy, OnChanges {
   
   private filter(value: string): Option[] {
     let options = this.options.filter(option => !this.formAsArray.value.find(value => option.value === value));
-    if (!value || value.length == 0) {
+    if ((!value || value.length == 0) && !this.showOptionsOnEmpty) {
       return [];
     }
     const filterValue = value.toString().toLowerCase();