From 4542189a262476fe3fd169482ab1ffbb2a4b3c47 Mon Sep 17 00:00:00 2001
From: Diamantis Tziotzios <dtziotzios@cite.gr>
Date: Mon, 29 Jan 2024 14:39:20 +0200
Subject: [PATCH] autocomplete changes

---
 .../referencesearch/FieldSearchBuilder.java   |   3 +-
 .../services/reference/reference.service.ts   |   1 +
 .../multiple-auto-complete-configuration.ts   |   4 +-
 .../multiple-auto-complete.component.html     |  67 +----
 .../multiple-auto-complete.component.ts       | 251 ++++++++----------
 5 files changed, 119 insertions(+), 207 deletions(-)

diff --git a/dmp-backend/core/src/main/java/eu/eudat/model/builder/referencesearch/FieldSearchBuilder.java b/dmp-backend/core/src/main/java/eu/eudat/model/builder/referencesearch/FieldSearchBuilder.java
index f277ee2a3..36399d472 100644
--- a/dmp-backend/core/src/main/java/eu/eudat/model/builder/referencesearch/FieldSearchBuilder.java
+++ b/dmp-backend/core/src/main/java/eu/eudat/model/builder/referencesearch/FieldSearchBuilder.java
@@ -68,7 +68,7 @@ public class FieldSearchBuilder extends BaseBuilder<Field, Map<String, String>>
     }
 
     private List<ReferenceTypeField> getPropertiesFields(ReferenceType referenceType){
-        switch (referenceType){
+        switch (referenceType) {
             case Taxonomies: return properties.getTaxonomy().get("fields");
             case Licenses: return properties.getLicence().get("fields");
             case Publications: return properties.getPublication().get("fields");
@@ -80,6 +80,7 @@ public class FieldSearchBuilder extends BaseBuilder<Field, Map<String, String>>
             case Organizations: return properties.getOrganisation().get("fields");
             case Datasets: return properties.getDataset().get("fields");
             case Funder: return properties.getFunder().get("fields");
+            case Grants: return properties.getGrant().get("fields");
             case Project: return properties.getProject().get("fields");
             case Researcher: return properties.getResearcher().get("fields");
             default: return null;
diff --git a/dmp-frontend/src/app/core/services/reference/reference.service.ts b/dmp-frontend/src/app/core/services/reference/reference.service.ts
index c0075c023..6999bf189 100644
--- a/dmp-frontend/src/app/core/services/reference/reference.service.ts
+++ b/dmp-frontend/src/app/core/services/reference/reference.service.ts
@@ -138,6 +138,7 @@ export class ReferenceService {
 			titleFn: (item: Reference) => item.label,
 			subtitleFn: (item: Reference) => item?.sourceType === ReferenceSourceType.External ? this.language.instant('REFERENCE-FIELD-COMPONENT.EXTERNAL-SOURCE') + ': ' + item.source : this.language.instant('REFERENCE-FIELD-COMPONENT.INTERNAL-SOURCE'),
 			valueAssign: (item: Reference) => item,
+			uniqueAssign: (item: Reference) => item.source + '_' + item.reference,
 		};
 	}
 
diff --git a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete-configuration.ts b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete-configuration.ts
index fc4f529a8..85a57e34e 100644
--- a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete-configuration.ts
+++ b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete-configuration.ts
@@ -13,7 +13,7 @@ export interface MultipleAutoCompleteConfiguration {
 	// Static or initial items.
 	initialItems?: (excludedItems: any[], data?: any) => Observable<any[]>;
 	// Data retrieval function
-	filterFn?: (searchQuery: string, excludedItems: any[]) => Observable<any[]>;
+	filterFn?: (searchQuery: string, excludedItems: any[], extraData?: any) => Observable<any[]>;
 	// Get selected items. Used when valueAssign is used so the full object can be retrieved for presentation.
 	getSelectedItems?: (selectedItems: any[]) => Observable<any[]>;
 	// Property formating for input
@@ -28,6 +28,8 @@ export interface MultipleAutoCompleteConfiguration {
 	extraData?: any;
 	// Callback to intercept value assignment based on item selection
 	valueAssign?: (selectedItem: any) => any;
+	// Callback to intercept value assignment based on item selection
+	uniqueAssign?: (selectedItem: any) => any;
 	// Property formating template
 	optionTemplate?: TemplateRef<any>;
 	// Property formatting component
diff --git a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html
index 04b2ae965..8692b29fa 100644
--- a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html
+++ b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html
@@ -1,30 +1,11 @@
-<div class="row multiple-auto-complete" ngForm>
-	<!-- <mat-chip-grid #chipList ngDefaultControl style="width: 100% !important;">
-		<ng-container *ngIf="value as values">
-			<mat-chip *ngFor="let value of values" [disabled]="disabled" [selectable]="selectable" [removable]="removable" [ngClass]="computeClass(value)">
-				<ng-container *ngIf="_selectedItems.get(stringify(value)) as selectedItem">
-					<ng-template #cellTemplate *ngIf="_selectedValueTemplate(selectedItem)" [ngTemplateOutlet]="_selectedValueTemplate(selectedItem)" [ngTemplateOutletContext]="{ item: selectedItem }"></ng-template>
-					<div class="row">
-						<div *ngIf="!_selectedValueTemplate(selectedItem)">{{_displayFn(selectedItem)}}</div>
-						<mat-icon matChipRemove *ngIf="!disabled && removable" (click)="_removeSelectedItem(_selectedItems.get(stringify(value)), $event)">cancel</mat-icon>
-					</div>
-				</ng-container>
-			</mat-chip>
-		</ng-container>
-		<input matInput #autocompleteInput class="col" style="width: calc(100% - 8px) !important;" [class.hide-placeholder]="hidePlaceholder" [name]="id" autocomplete="off" #autocompleteTrigger="matAutocompleteTrigger" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" (keydown)="onKeyDown($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" (matChipInputTokenEnd)="_addItem($event)" [matAutocompleteConnectedTo]="origin">
-		<mat-icon *ngIf="!disabled" class="align-arrow-right" matSuffix>arrow_drop_down</mat-icon>
-		<div style="height: 0 !important; width: 100% !important; visibility: hidden !important;" matAutocompleteOrigin #origin="matAutocompleteOrigin"></div>
-	</mat-chip-grid> -->
-
+<div class="row multiple-auto-complete" ng-form>
 	<mat-chip-grid #chipList ngDefaultControl class="chip-list">
 		<ng-container *ngIf="value as values;">
 			<mat-chip-row *ngFor="let value of values" [disabled]="disabled" [selectable]="selectable" [removable]="removable" [ngClass]="computeClass(value)">
-				<ng-container *ngIf="_selectedItems.get(stringify(value)) as selectedItem;">
-
+				<ng-container *ngIf="getSelectedItem(value) as selectedItem;">
 					<ng-template #cellTemplate *ngIf="_selectedValueTemplate(selectedItem)" [ngTemplateOutlet]="_selectedValueTemplate(selectedItem)" [ngTemplateOutletContext]="{
 							item: selectedItem
 						}" />
-
 					<span *ngIf="!_selectedValueTemplate(selectedItem)" class="chip-text" [title]="_displayFn(selectedItem)">{{_displayFn(selectedItem)}}</span>
 				</ng-container>
 				<button matChipRemove *ngIf="!disabled && removable" (click)="_removeSelectedItem(_selectedItems.get(stringify(value)), $event)">
@@ -33,17 +14,17 @@
 			</mat-chip-row>
 		</ng-container>
 	</mat-chip-grid>
-	<input matInput #autocompleteInput class="col" [name]="id" autocomplete="nope" #autocompleteTrigger="matAutocompleteTrigger" autocomplete="off" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="autoSelectFirstOptionOnBlur" (matChipInputTokenEnd)="_addItem($event)" [matAutocompleteConnectedTo]="origin">
+	<input matInput #autocompleteInput class="col" [name]="id" autocomplete="nope" #autocompleteTrigger="matAutocompleteTrigger" autocomplete="off" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="autoSelectFirstOptionOnBlur" (matChipInputTokenEnd)="_addItem($event)">
 	<mat-icon *ngIf="!disabled" class="align-arrow-right" matSuffix>arrow_drop_down</mat-icon>
-	<div style="height: 0 !important; width: 100% !important; visibility: hidden !important;" matAutocompleteOrigin #origin="matAutocompleteOrigin"></div>
-
-
 	<mat-autocomplete #autocomplete="matAutocomplete" [displayWith]="_displayFn.bind(this)" (optionSelected)="_optionSelected($event)">
 		<span *ngIf="_groupedItems">
 			<mat-optgroup *ngFor="let group of _groupedItems | async" [label]="group.title">
-				<mat-option *ngFor="let item of group.items" [value]="item" (mousedown)="selected = true;" (mouseup)="selected = false;" [class.two-line-mat-option]="_subtitleFn(item) && !_optionTemplate(item)">
+				<mat-option *ngFor="let item of group.items" [value]="item" class="option" [class.two-line-mat-option]="_subtitleFn(item) && !_optionTemplate(item) && !_optionComponent(item)">
 					<!-- <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" /> -->
-					<ng-template #cellTemplate *ngIf="_optionTemplate(item)" [ngTemplateOutlet]="_optionTemplate(item)" [ngTemplateOutletContext]="{
+					<ng-container *ngIf="_optionComponent(item)">
+						<ng-container *ngComponentOutlet="_optionComponent(item); inputs: { item };" />
+					</ng-container>
+					<ng-template #cellTemplate *ngIf="_optionTemplate(item) && !_optionComponent(item)" [ngTemplateOutlet]="_optionTemplate(item)" [ngTemplateOutletContext]="{
 							item: item
 						}"></ng-template>
 					<div *ngIf="!_optionTemplate(item)" class="d-flex">
@@ -90,38 +71,6 @@
 			<ng-template #loading>
 				<mat-option disabled="true">loading...</mat-option>
 			</ng-template>
-
-
-			<!-- <ng-container *ngIf="_items | async as autocompleteItems; else loading">
-				<ng-container *ngIf="autocompleteItems.length">
-					<mat-option *ngFor="let item of autocompleteItems" [value]="item" (mousedown)="selected = true;" (mouseup)="selected = false;" [class.two-line-mat-option]="_subtitleFn(item) && !_optionTemplate(item)">
-						<ng-template #cellTemplate *ngIf="_optionTemplate(item)" [ngTemplateOutlet]="_optionTemplate(item)" [ngTemplateOutletContext]="{
-										item: item
-									}"></ng-template>
-						<div *ngIf="!_optionTemplate(item)" class="d-flex">
-							<div class="title-subtitle-fn">
-								<div class="title-fn">
-									<div class="title-fn-inner">
-										<span *ngIf="!_optionTemplate(item)">{{_titleFn(item)}}</span>
-									</div>
-								</div>
-								<div *ngIf="_subtitleFn(item)" class="subtitle-fn">
-									<div class="subtitle-fn-inner">
-										<small [innerHTML]="_subtitleFn(item)"></small>
-									</div>
-								</div>
-							</div>
-							<span *ngIf="popupItemActionIcon" class="option-icon" (click)="_optionActionClick(item, $event)"><mat-icon>{{popupItemActionIcon}}</mat-icon></span>
-						</div>
-					</mat-option>
-				</ng-container>
-				<ng-container *ngIf="!autocompleteItems.length && showNoResultsLabel && (queryValue == inputValue)">
-					<mat-option disabled="true">No results found!</mat-option>
-				</ng-container>
-			</ng-container>
-			<ng-template #loading>
-				<mat-option disabled="true">loading...</mat-option>
-			</ng-template> -->
 		</span>
 	</mat-autocomplete>
 </div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts
index 666a42a41..41ebb702b 100644
--- a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts
+++ b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts
@@ -28,8 +28,8 @@ import {
 } from '@app/library/auto-complete/multiple/multiple-auto-complete-configuration';
 import { BaseComponent } from '@common/base/base.component';
 import { isNullOrUndefined } from '@swimlane/ngx-datatable';
-import { BehaviorSubject, Observable, Subject, Subscription, combineLatest, of as observableOf } from 'rxjs';
-import { debounceTime, distinctUntilChanged, map, startWith, switchMap, takeUntil, tap } from 'rxjs/operators';
+import { BehaviorSubject, Observable, Subject, Subscription, combineLatest, interval, of as observableOf, of } from 'rxjs';
+import { catchError, debounceTime, delayWhen, distinctUntilChanged, map, mergeMap, startWith, switchMap, take, takeUntil, tap } from 'rxjs/operators';
 
 export class CustomComponentBase extends BaseComponent {
 	constructor(
@@ -84,7 +84,7 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
 
 	valueOnBlur = new BehaviorSubject<any>(null);
 	onSelectAutoCompleteValue = new BehaviorSubject<any>(null);
-	valueAssignSubscription: Subscription;
+	// valueAssignSubscription: Subscription;
 
 	queryValue: string = "";
 
@@ -170,10 +170,24 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
 	) {
 		super(_defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl, new Subject<void>());
 
-		fm.monitor(elRef.nativeElement, true).pipe(takeUntil(this._destroyed)).subscribe((origin) => {
-			this.focused = !!origin;
-			this.stateChanges.next();
-		});
+		fm.monitor(elRef.nativeElement, true)
+			.pipe(
+				distinctUntilChanged(),
+				switchMap(
+					(origin) => of(origin).pipe(
+						delayWhen((origin) => interval(!!origin ? 0 : 200).pipe(take(1))), // delay focusout (user may have made a selection) then close options if open
+					)
+				),
+				takeUntil(this._destroyed)
+			)
+			.subscribe((origin) => {
+				this.focused = !!origin;
+				this.stateChanges.next();
+
+				if (!this.focused) {
+					this.autocompleteTrigger?.closePanel();
+				}
+			});
 
 		if (this.ngControl != null) {
 			// Setting the value accessor directly (instead of using
@@ -182,36 +196,7 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
 		}
 	}
 
-	ngOnInit() {
-		this.valueAssignSubscription = combineLatest(this.valueOnBlur.asObservable(), this.onSelectAutoCompleteValue.asObservable())
-			.pipe(debounceTime(100))
-			.subscribe(latest => {
-				const fromBlur = latest[0];
-				const fromAutoComplete = latest[1];
-
-				if (isNullOrUndefined(fromBlur) && isNullOrUndefined(fromAutoComplete)) {
-					return;
-				}
-				//higher precedence
-				if (!isNullOrUndefined(fromAutoComplete)) {
-					this.optionSelectedInternal(fromAutoComplete);
-
-					// consumed and flush
-					this.onSelectAutoCompleteValue.next(null);
-					this.valueOnBlur.next(null);
-					return;
-				}
-
-				if (!isNullOrUndefined(fromBlur)) {
-					this.optionSelectedInternal(fromBlur);
-
-					// consumed and flush
-					this.onSelectAutoCompleteValue.next(null);
-					this.valueOnBlur.next(null);
-					return;
-				}
-			});
-	}
+	ngOnInit() { }
 
 	ngDoCheck(): void {
 		if (this.ngControl) {
@@ -220,37 +205,50 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
 	}
 
 	ngOnChanges(changes: SimpleChanges) {
-		if (changes['configuration'] && changes['configuration'].isFirstChange) {
-			this.getSelectedItems(this.value);
-		}
+
 	}
 
+	private gettingSelectedItem$ = new Subject<void>();
 	getSelectedItems(value: any) {
 		if (value != null && Array.isArray(value) && this.configuration) {
-			const newSelections = value.filter(x => !this._selectedItems.has(this.stringify(x)));
+			const newSelections = value.filter(x => !this._selectedItems.has(JSON.stringify(x)));
 			if (newSelections.length > 0 && this.configuration.getSelectedItems != null) {
-				this.configuration.getSelectedItems(newSelections).pipe(takeUntil(this._destroyed)).subscribe(x => {
+				this.gettingSelectedItem$.next();
+				this.configuration.getSelectedItems(newSelections).pipe(takeUntil(this._destroyed), takeUntil(this.gettingSelectedItem$)).subscribe(x => {
+
 					x.forEach(element => {
-						this._selectedItems.set(this.stringify(this.configuration.valueAssign != null ? this.configuration.valueAssign(element) : element), element);
+						this._selectedItems.set(JSON.stringify(
+							this.configuration.uniqueAssign != null ? this.configuration.uniqueAssign(element) :
+								this.configuration.valueAssign != null ? this.configuration.valueAssign(element) : element
+						), element);
 					});
+					this.value = value;
+
 				});
 			} else {
 				newSelections.forEach(element => {
-					this._selectedItems.set(this.stringify(this.configuration.valueAssign != null ? this.configuration.valueAssign(element) : element), element);
+					this._selectedItems.set(JSON.stringify(
+						this.configuration.uniqueAssign != null ? this.configuration.uniqueAssign(element) :
+							this.configuration.valueAssign != null ? this.configuration.valueAssign(element) : element
+					), element);
 				});
 			}
 		}
 	}
 
+	getSelectedItem(value: any) {
+		return this._selectedItems.get(JSON.stringify(this.configuration.uniqueAssign != null ? this.configuration.uniqueAssign(value) : value));
+	}
+
 	filter(query: string): Observable<any[]> {
 		// If loadDataOnStart is enabled and query is empty we return the initial items.
 		if (this.isNullOrEmpty(query) && this.loadDataOnStart) {
-			return this.configuration.initialItems(this.configuration.extraData) || observableOf([]);
+			return this.configuration.initialItems(this.value || [], this.configuration.extraData) || observableOf([]);
 		} else if (query && query.length >= this.minFilteringChars) {
 			if (this.configuration.filterFn) {
-				return this.configuration.filterFn(query, this.configuration.extraData);
+				return this.configuration.filterFn(query, this.value || [], this.configuration.extraData);
 			} else {
-				return this.configuration.initialItems(this.configuration.extraData) || observableOf([]);
+				return this.configuration.initialItems(this.value || [], this.configuration.extraData) || observableOf([]);
 			}
 		} else {
 			return observableOf([]);
@@ -258,7 +256,7 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
 	}
 
 	stringify(value: any): string {
-		return typeof (value) == 'string' ? value : JSON.stringify(value);
+		return JSON.stringify(value);
 	}
 
 	isNullOrEmpty(query: string): boolean {
@@ -266,16 +264,16 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
 	}
 
 	_optionSelected(event: MatAutocompleteSelectedEvent) {
-		// this.optionSelectedInternal(event.option.value);
-		this.onSelectAutoCompleteValue.next(event.option.value);
+		this.optionSelectedInternal(event.option.value);
 		this.autocompleteInput.nativeElement.value = '';
+		this._items = null; // refresh excluding previous item selected
 	}
 
 	private optionSelectedInternal(item: any) {
 		const newValue = this._valueToAssign(item);
 
 		//Update selected items
-		this._selectedItems.set(this.stringify(newValue), item);
+		this._selectedItems.set(JSON.stringify(this.configuration.uniqueAssign != null ? this.configuration.uniqueAssign(newValue) : newValue), item);
 
 		const newValueArray = (Array.isArray(this.value) ? this.value : []);
 		newValueArray.push(newValue);
@@ -289,18 +287,14 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
 		this.inputValue = event.target.value;
 		// prevent filtering results if arrow were pressed
 		if (event.keyCode !== ENTER && (event.keyCode < 37 || event.keyCode > 40)) {
+
+
+			if (!this._items) { // possibly from an error request here
+				this._onInputFocus();
+			}
+
 			this._inputSubject.next(this.inputValue);
 		}
-
-		// if (event.keyCode !== ENTER && (event.keyCode < 37 || event.keyCode > 40) && event.keyCode !== COMMA) {
-		// 	this._inputSubject.next(this.inputValue);
-		// }
-	}
-
-	public onKeyDown(event) {
-		if (event.keyCode === BACKSPACE && event.target.value.length === 0 && this._selectedItems.size > 0) {
-			this._removeSelectedItem(Array.from(this._selectedItems.values()).pop(), event);
-		}
 	}
 
 	private _setValue(value: any) {
@@ -316,68 +310,45 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
 				debounceTime(this.requestDelay),
 				distinctUntilChanged(),
 				distinctUntilChanged(),
-				tap(query => this.queryValue = query),
-				switchMap(query => (!this.minLength || (query && query.length >= this.minLength)) ? this.filter(query) : observableOf([])));
+				mergeMap(query => this.filter(query)),
+				catchError(error => {
+					this._items = null;
+					console.error(error);
+					return of([])
+				})
 
-			if (this.configuration.groupingFn) {
-				this._groupedItems = this._items.pipe(map(items => this.configuration.groupingFn(items)));
-			}
+			);
+
+			if (this.configuration.groupingFn) { this._groupedItems = this._items.pipe(map(items => this.configuration.groupingFn(items))); }
 		}
 	}
 
-	public onBlur($event: FocusEvent) {
-		if (!this.selected) {
-			if (this.inputValue && this.inputValue.length > 1 && this.autocomplete.options && this.autocomplete.options.length > 0 && this.autoSelectFirstOptionOnBlur) {
-				// this.optionSelectedInternal(this.autocomplete.options.first.value);
-				this.valueOnBlur.next(this.autocomplete.options.first.value);
-			} else if (this.inputValue && this.inputValue.length > 1 && this.autoSelectFirstOptionOnBlur) {
-				this.valueOnBlur.next(this.inputValue);
-			}
-		}
-
-		// Clear text if not an option
-		if (this.inputValue && this.inputValue.length > 1) {
-			this.inputValue = '';
-			document.getElementById((<HTMLInputElement>$event.target).id).focus();
+	public onBlur($event: MouseEvent) {
+		if (this.inputValue.length > 1 && this.autocomplete.options && this.autocomplete.options.length > 0 && this.autoSelectFirstOptionOnBlur) {
+			this.optionSelectedInternal(this.autocomplete.options.first.value);
 		}
 	}
 
 
-	onChange = (_: any) => {
-	};
-	private _onTouched = () => {
-	};
-
+	onChange = (_: any) => { };
+	private _onTouched = () => { };
 	writeValue(value: any): void {
 		this.value = Array.isArray(value) ? value : null;
 		// Update chips observable
-		this.getSelectedItems(value);
-	}
-
-	pushChanges(value: any) {
-		this.onChange(value);
-	}
-
-	registerOnChange(fn: (_: any) => {}): void {
-		this.onChange = fn;
-	}
-
-	registerOnTouched(fn: () => {}): void {
-		this._onTouched = fn;
-	}
-
-	setDisabledState(isDisabled: boolean): void {
-		this.disabled = isDisabled;
-	}
-
-	setDescribedByIds(ids: string[]) {
-		this.describedBy = ids.join(' ');
+		this._items = null;
+		this.getSelectedItems(this.value);
 	}
+	pushChanges(value: any) { this.onChange(value); }
+	registerOnChange(fn: (_: any) => {}): void { this.onChange = fn; }
+	registerOnTouched(fn: () => {}): void { this._onTouched = fn; }
+	setDisabledState(isDisabled: boolean): void { this.disabled = isDisabled; }
+	setDescribedByIds(ids: string[]) { this.describedBy = ids.join(' '); }
 
 	onContainerClick(event: MouseEvent) {
 		event.stopPropagation();
-		if (this.disabled) {
-			return;
+		if (this.disabled) { return; }
+		if (this.autocompleteInput) {
+			this.fm.focusVia(this.autocompleteInput.nativeElement, 'program');
 		}
 		this._onInputFocus();
 		if (!this.autocomplete.isOpen) {
@@ -388,25 +359,18 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
 	ngOnDestroy() {
 		this.stateChanges.complete();
 		this.fm.stopMonitoring(this.elRef.nativeElement);
-		if (this.valueAssignSubscription) {
-			this.valueAssignSubscription.unsubscribe();
-			this.valueAssignSubscription = null;
-		}
+		this.gettingSelectedItem$.complete();
 	}
 
 	//Configuration getters
 	_displayFn(item: any): string {
 		// console.log('_displayFn' + item);
-		if (this.configuration.displayFn && item) {
-			return this.configuration.displayFn(item);
-		}
+		if (this.configuration.displayFn && item) { return this.configuration.displayFn(item); }
 		return item;
 	}
 
 	_titleFn(item: any): string {
-		if (this.configuration.titleFn && item) {
-			return this.configuration.titleFn(item);
-		}
+		if (this.configuration.titleFn && item) { return this.configuration.titleFn(item); }
 		return item;
 	}
 
@@ -421,28 +385,22 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
 	}
 
 	_selectedValueTemplate(item: any): TemplateRef<any> {
-		if (this.configuration.selectedValueTemplate && item) {
-			return this.configuration.selectedValueTemplate;
-		}
+		if (this.configuration.selectedValueTemplate && item) { return this.configuration.selectedValueTemplate; }
 		return null;
 	}
 
 	_subtitleFn(item: any): string {
-		if (this.configuration.subtitleFn && item) {
-			return this.configuration.subtitleFn(item);
-		}
+		if (this.configuration.subtitleFn && item) { return this.configuration.subtitleFn(item); }
 		return null;
 	}
 
 	_valueToAssign(item: any): any {
-		if (this.configuration.valueAssign && item) {
-			return this.configuration.valueAssign(item);
-		}
+		if (this.configuration.valueAssign && item) { return this.configuration.valueAssign(item); }
 		return item;
 	}
 
 	get requestDelay(): number {
-		return this.configuration.requestDelay != null ? this.configuration.requestDelay : 600;
+		return this.configuration.requestDelay != null ? this.configuration.requestDelay : 200;
 	}
 
 	get minFilteringChars(): number {
@@ -457,40 +415,35 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
 		return this.configuration.autoSelectFirstOptionOnBlur != null ? this.configuration.autoSelectFirstOptionOnBlur : false;
 	}
 
-	get popupItemActionIcon(): string {
-		return this.configuration.popupItemActionIcon != null ? this.configuration.popupItemActionIcon : '';
-	}
-
-	get appendClassToItem(): { class: string, applyFunc: (item: any) => boolean }[] {
-		return this.configuration.appendClassToItem !== null ? this.configuration.appendClassToItem : null;
-	}
-
 	//Chip Functions
 	_addItem(event: MatChipInputEvent): void {
 		const input = event.input;
 		const value = event.value;
 		// Add our fruit
-		if (value.trim()) {
-			// this.optionSelectedInternal(value);
-			this.valueOnBlur.next(value);
-		}
+		// if ((value || '').trim()) {
+		// 	this.selectedItems.push(value.trim());
+		// }
 		// Reset the input value
 		if (input) {
 			this.inputValue = '';
 		}
 		//this.inputFormControl.setValue(null);
 	}
+	public reset(): void {
+		this._inputSubject.unsubscribe();
+		this._inputSubject = new Subject<string>();
+		this._items = null;
+	}
 
 	_removeSelectedItem(item: any, event: MouseEvent): void {
-		if (event != null) {
-			event.stopPropagation();
-		}
+		if (event != null) { event.stopPropagation(); }
 		const valueToDelete = this._valueToAssign(item);
-		this.value = this.value.filter(x => this.stringify(x) !== this.stringify(valueToDelete)); //TODO, maybe we need to implement equality here differently.
+		this.value = this.value.filter(x => JSON.stringify(x) !== JSON.stringify(valueToDelete)); //TODO, maybe we need to implement equality here differently.
 		this.optionRemoved.emit(item);
+		this._items = null; // refresh query with excluded items
 
 		//Update chips
-		this._selectedItems.delete(this.stringify(valueToDelete));
+		this._selectedItems.delete(JSON.stringify(valueToDelete));
 
 		this.autocompleteInput.nativeElement.focus();
 		this.pushChanges(this.value);
@@ -503,9 +456,15 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
 		this.optionActionClicked.emit(item);
 	}
 
+	get popupItemActionIcon(): string {
+		return this.configuration.popupItemActionIcon != null ? this.configuration.popupItemActionIcon : '';
+	}
+
+	get appendClassToItem(): { class: string, applyFunc: (item: any) => boolean }[] {
+		return this.configuration.appendClassToItem !== null ? this.configuration.appendClassToItem : null;
+	}
 
 	private readonly empyObj = {};
-
 	computeClass(value: any) {
 		if (!(this.appendClassToItem && this.appendClassToItem.length)) {
 			return this.empyObj;