From 0d9b6f96226b686a2fc4ebec822bc5ab93e75c8a Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Wed, 3 May 2023 12:34:17 +0300
Subject: [PATCH] Fix bug where on long click, blur value was added in the list
 of chips.

---
 .../multiple-auto-complete.component.html     |   5 +-
 .../multiple-auto-complete.component.ts       | 236 ++++++++++++------
 2 files changed, 164 insertions(+), 77 deletions(-)

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 c09a78590..730b5691f 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
@@ -17,7 +17,6 @@
 			   [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue"
 			   (keyup)="onKeyUp($event)" (keydown)="onKeyDown($event)" [disabled]="disabled" (focus)="_onInputFocus()"
 			   (blur)="onBlur($event)" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-			   [matChipInputAddOnBlur]="autoSelectFirstOptionOnBlur"
 			   (matChipInputTokenEnd)="_addItem($event)"
 			   [matAutocompleteConnectedTo]="origin">
 		<!-- The attribute autocomplete="nope", set by downshift, is ignored in Chrome 67 and Opera 54 (latest at the time of writing)
@@ -29,7 +28,7 @@
 	<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" [class.two-line-mat-option]="_subtitleFn(item) && !_optionTemplate(item)">
+				<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)">
 					<!-- <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" /> -->
 					<ng-template #cellTemplate *ngIf="_optionTemplate(item)" [ngTemplateOutlet]="_optionTemplate(item)" [ngTemplateOutletContext]="{
 							item: item
@@ -55,7 +54,7 @@
 		<span *ngIf="!_groupedItems">
 			<ng-container *ngIf="_items | async as autocompleteItems; else loading">
 				<ng-container *ngIf="autocompleteItems.length">
-					<mat-option *ngFor="let item of autocompleteItems" [value]="item" [class.two-line-mat-option]="_subtitleFn(item) && !_optionTemplate(item)">
+					<mat-option *ngFor="let item of autocompleteItems" [value]="item" (mousedown)="selected = true;" (mouseup)="selected = false;" [class.two-line-mat-option]="_subtitleFn(item) && !_optionTemplate(item)">
 						<!-- <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" /> -->
 						<ng-template #cellTemplate *ngIf="_optionTemplate(item)" [ngTemplateOutlet]="_optionTemplate(item)" [ngTemplateOutletContext]="{
 										item: item
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 c0d04f7d4..05fb77646 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
@@ -1,16 +1,33 @@
-import { FocusMonitor } from '@angular/cdk/a11y';
-import { BACKSPACE, ENTER } from '@angular/cdk/keycodes';
-import { Component, DoCheck, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Optional, Output, Self, SimpleChanges, TemplateRef, ViewChild } from '@angular/core';
-import { ControlValueAccessor, FormGroupDirective, NgControl, NgForm } from '@angular/forms';
-import { MatChipInputEvent } from '@angular/material/chips';
-import { ErrorStateMatcher, mixinErrorState } from '@angular/material/core';
-import { MatAutocomplete, MatAutocompleteSelectedEvent, MatAutocompleteTrigger } from '@angular/material/autocomplete';
-import { MatFormFieldControl } from '@angular/material/form-field';
-import { AutoCompleteGroup } from '@app/library/auto-complete/auto-complete-group';
-import { MultipleAutoCompleteConfiguration } 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, combineLatest, Observable, of as observableOf, Subject, Subscription } from 'rxjs';
+import {FocusMonitor} from '@angular/cdk/a11y';
+import {BACKSPACE, ENTER} from '@angular/cdk/keycodes';
+import {
+	Component,
+	DoCheck,
+	ElementRef,
+	EventEmitter,
+	Input,
+	OnChanges,
+	OnDestroy,
+	OnInit,
+	Optional,
+	Output,
+	Self,
+	SimpleChanges,
+	TemplateRef,
+	ViewChild
+} from '@angular/core';
+import {ControlValueAccessor, FormGroupDirective, NgControl, NgForm} from '@angular/forms';
+import {MatChipInputEvent} from '@angular/material/chips';
+import {ErrorStateMatcher, mixinErrorState} from '@angular/material/core';
+import {MatAutocomplete, MatAutocompleteSelectedEvent, MatAutocompleteTrigger} from '@angular/material/autocomplete';
+import {MatFormFieldControl} from '@angular/material/form-field';
+import {AutoCompleteGroup} from '@app/library/auto-complete/auto-complete-group';
+import {
+	MultipleAutoCompleteConfiguration
+} 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, combineLatest, Observable, of as observableOf, Subject, Subscription} from 'rxjs';
 import {debounceTime, distinctUntilChanged, map, startWith, takeUntil, switchMap, tap} from 'rxjs/operators';
 
 export class CustomComponentBase extends BaseComponent {
@@ -19,28 +36,35 @@ export class CustomComponentBase extends BaseComponent {
 		public _parentForm: NgForm,
 		public _parentFormGroup: FormGroupDirective,
 		public ngControl: NgControl
-	) { super(); }
+	) {
+		super();
+	}
 }
+
 export const _CustomComponentMixinBase = mixinErrorState(CustomComponentBase);
 
 @Component({
 	selector: 'app-multiple-auto-complete',
 	templateUrl: './multiple-auto-complete.component.html',
 	styleUrls: ['./multiple-auto-complete.component.scss'],
-	providers: [{ provide: MatFormFieldControl, useExisting: MultipleAutoCompleteComponent }]
+	providers: [{provide: MatFormFieldControl, useExisting: MultipleAutoCompleteComponent}]
 })
 export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase implements OnInit, MatFormFieldControl<string>, ControlValueAccessor, OnDestroy, DoCheck, OnChanges {
 
 	static nextId = 0;
-	@ViewChild('autocomplete', { static: true }) autocomplete: MatAutocomplete;
-	@ViewChild('autocompleteTrigger', { static: true }) autocompleteTrigger: MatAutocompleteTrigger;
-	@ViewChild('autocompleteInput', { static: true }) autocompleteInput: ElementRef;
+	@ViewChild('autocomplete', {static: true}) autocomplete: MatAutocomplete;
+	@ViewChild('autocompleteTrigger', {static: true}) autocompleteTrigger: MatAutocompleteTrigger;
+	@ViewChild('autocompleteInput', {static: true}) autocompleteInput: ElementRef;
 
 	@Input()
-	get configuration(): MultipleAutoCompleteConfiguration { return this._configuration; }
+	get configuration(): MultipleAutoCompleteConfiguration {
+		return this._configuration;
+	}
+
 	set configuration(configuration: MultipleAutoCompleteConfiguration) {
 		this._configuration = configuration;
 	}
+
 	private _configuration: MultipleAutoCompleteConfiguration;
 
 	@Input()
@@ -72,46 +96,66 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
 	_groupedItems: Observable<AutoCompleteGroup[]>;
 	selectable = false;
 	removable = true;
+	selected: boolean = false;
 
-	get empty() { return (!this.value || this.value.length === 0) && (!this.inputValue || this.inputValue.length === 0); }
+	get empty() {
+		return (!this.value || this.value.length === 0) && (!this.inputValue || this.inputValue.length === 0);
+	}
 
-	get shouldLabelFloat() { return this.focused || !this.empty; }
+	get shouldLabelFloat() {
+		return this.focused || !this.empty;
+	}
 
 	@Input() minLength: number = 0;
 	@Input() showNoResultsLabel: boolean = true;
 	@Input() hidePlaceholder: boolean = false;
+
 	@Input()
-	get placeholder() { return this._placeholder; }
+	get placeholder() {
+		return this._placeholder;
+	}
+
 	set placeholder(placeholder) {
 		this._placeholder = placeholder;
 		this.stateChanges.next();
 	}
+
 	private _placeholder: string;
 
 	@Input()
-	get required() { return this._required; }
+	get required() {
+		return this._required;
+	}
+
 	set required(req) {
 		this._required = !!(req);
 		this.stateChanges.next();
 	}
+
 	private _required = false;
 
 	@Input()
-	get disabled() { return this._disabled; }
+	get disabled() {
+		return this._disabled;
+	}
+
 	set disabled(dis) {
 		this._disabled = !!(dis);
 		this.stateChanges.next();
 	}
+
 	private _disabled = false;
 
 	@Input()
 	get value(): any | null {
 		return this._selectedValue;
 	}
+
 	set value(value: any | null) {
 		this._selectedValue = (value != null && value.length === 0) ? null : value;
 		this.stateChanges.next();
 	}
+
 	private _selectedValue;
 
 	constructor(
@@ -138,33 +182,33 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
 
 	ngOnInit() {
 		this.valueAssignSubscription = combineLatest(this.valueOnBlur.asObservable(), this.onSelectAutoCompleteValue.asObservable())
-		.pipe(debounceTime(200))
-		.subscribe(latest => {
-			const fromBlur = latest[0];
-			const fromAutoComplete = latest[1];
+			.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);
+				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;
-			}
+					// consumed and flush
+					this.onSelectAutoCompleteValue.next(null);
+					this.valueOnBlur.next(null);
+					return;
+				}
 
-			if(!isNullOrUndefined(fromBlur)){
-				this.optionSelectedInternal(fromBlur);
-				this.autocompleteTrigger.closePanel();
-				// 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;
+				}
+			});
 	}
 
 	ngDoCheck(): void {
@@ -273,14 +317,20 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
 				tap(query => this.queryValue = query),
 				switchMap(query => (!this.minLength || (query && query.length >= this.minLength)) ? this.filter(query) : observableOf([])));
 
-			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.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);
+		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
@@ -291,22 +341,42 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
 	}
 
 
-	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(' '); }
+
+	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;
+		}
 		this._onInputFocus();
 		if (!this.autocomplete.isOpen) {
 			this.autocompleteTrigger.openPanel();
@@ -316,7 +386,7 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
 	ngOnDestroy() {
 		this.stateChanges.complete();
 		this.fm.stopMonitoring(this.elRef.nativeElement);
-		if(this.valueAssignSubscription){
+		if (this.valueAssignSubscription) {
 			this.valueAssignSubscription.unsubscribe();
 			this.valueAssignSubscription = null;
 		}
@@ -325,32 +395,44 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
 	//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;
 	}
 
 	_optionTemplate(item: any): TemplateRef<any> {
-		if (this.configuration.optionTemplate && item) { return this.configuration.optionTemplate; }
+		if (this.configuration.optionTemplate && item) {
+			return this.configuration.optionTemplate;
+		}
 		return null;
 	}
 
 	_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;
 	}
 
@@ -373,7 +455,8 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
 	get popupItemActionIcon(): string {
 		return this.configuration.popupItemActionIcon != null ? this.configuration.popupItemActionIcon : '';
 	}
-	get appendClassToItem(): {class: string, applyFunc: (item: any) => boolean}[]{
+
+	get appendClassToItem(): { class: string, applyFunc: (item: any) => boolean }[] {
 		return this.configuration.appendClassToItem !== null ? this.configuration.appendClassToItem : null;
 	}
 
@@ -394,7 +477,9 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
 	}
 
 	_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.optionRemoved.emit(item);
@@ -407,22 +492,25 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
 	}
 
 	_optionActionClick(item: any, event: MouseEvent): void {
-		if (event != null) { event.stopPropagation(); }
+		if (event != null) {
+			event.stopPropagation();
+		}
 		this.optionActionClicked.emit(item);
 	}
 
 
 	private readonly empyObj = {};
-	computeClass(value: any){
-		if(!(this.appendClassToItem && this.appendClassToItem.length)){
+
+	computeClass(value: any) {
+		if (!(this.appendClassToItem && this.appendClassToItem.length)) {
 			return this.empyObj;
 		}
 
-		const classes = this.appendClassToItem.filter(e=> e.applyFunc(value));
+		const classes = this.appendClassToItem.filter(e => e.applyFunc(value));
 		return classes.reduce((r, current) => {
 			r[current.class] = true;
 			return r;
-		} , {});
+		}, {});
 
 	}
 }