Changes on multi-auto complete component.
* Give precedence on autocomplete option-selected over onblur. * Invitation dialog on blur commit given email till that time, on emails list.
This commit is contained in:
parent
5ddb7df2b4
commit
1b731fdf20
|
@ -8,7 +8,8 @@ import { MatFormFieldControl } from '@angular/material/form-field';
|
||||||
import { AutoCompleteGroup } from '@app/library/auto-complete/auto-complete-group';
|
import { AutoCompleteGroup } from '@app/library/auto-complete/auto-complete-group';
|
||||||
import { MultipleAutoCompleteConfiguration } from '@app/library/auto-complete/multiple/multiple-auto-complete-configuration';
|
import { MultipleAutoCompleteConfiguration } from '@app/library/auto-complete/multiple/multiple-auto-complete-configuration';
|
||||||
import { BaseComponent } from '@common/base/base.component';
|
import { BaseComponent } from '@common/base/base.component';
|
||||||
import { Observable, of as observableOf, Subject } from 'rxjs';
|
import { isNullOrUndefined } from '@swimlane/ngx-datatable';
|
||||||
|
import { BehaviorSubject, combineLatest, Observable, of as observableOf, Subject, Subscription } from 'rxjs';
|
||||||
import { debounceTime, distinctUntilChanged, map, mergeMap, startWith, takeUntil, switchMap } from 'rxjs/operators';
|
import { debounceTime, distinctUntilChanged, map, mergeMap, startWith, takeUntil, switchMap } from 'rxjs/operators';
|
||||||
|
|
||||||
export class CustomComponentBase extends BaseComponent {
|
export class CustomComponentBase extends BaseComponent {
|
||||||
|
@ -50,6 +51,11 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
|
||||||
|
|
||||||
id = `multiple-autocomplete-${MultipleAutoCompleteComponent.nextId++}`;
|
id = `multiple-autocomplete-${MultipleAutoCompleteComponent.nextId++}`;
|
||||||
stateChanges = new Subject<void>();
|
stateChanges = new Subject<void>();
|
||||||
|
|
||||||
|
valueOnBlur = new BehaviorSubject<any>(null);
|
||||||
|
onSelectAutoCompleteValue = new BehaviorSubject<any>(null);
|
||||||
|
valueAssignSubscription: Subscription;
|
||||||
|
|
||||||
focused = false;
|
focused = false;
|
||||||
controlType = 'multiple-autocomplete';
|
controlType = 'multiple-autocomplete';
|
||||||
describedBy = '';
|
describedBy = '';
|
||||||
|
@ -123,7 +129,36 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit() { }
|
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;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
ngDoCheck(): void {
|
ngDoCheck(): void {
|
||||||
if (this.ngControl) {
|
if (this.ngControl) {
|
||||||
|
@ -178,7 +213,8 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
|
||||||
}
|
}
|
||||||
|
|
||||||
_optionSelected(event: MatAutocompleteSelectedEvent) {
|
_optionSelected(event: MatAutocompleteSelectedEvent) {
|
||||||
this.optionSelectedInternal(event.option.value);
|
// this.optionSelectedInternal(event.option.value);
|
||||||
|
this.onSelectAutoCompleteValue.next(event.option.value);
|
||||||
this.autocompleteInput.nativeElement.value = '';
|
this.autocompleteInput.nativeElement.value = '';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -235,7 +271,8 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
|
||||||
|
|
||||||
public onBlur($event: MouseEvent) {
|
public onBlur($event: MouseEvent) {
|
||||||
if (this.inputValue && this.inputValue.length > 1 && this.autocomplete.options && this.autocomplete.options.length > 0 && this.autoSelectFirstOptionOnBlur) {
|
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.optionSelectedInternal(this.autocomplete.options.first.value);
|
||||||
|
this.valueOnBlur.next(this.autocomplete.options.first.value);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Clear text if not an option
|
// Clear text if not an option
|
||||||
|
@ -271,6 +308,10 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
|
||||||
ngOnDestroy() {
|
ngOnDestroy() {
|
||||||
this.stateChanges.complete();
|
this.stateChanges.complete();
|
||||||
this.fm.stopMonitoring(this.elRef.nativeElement);
|
this.fm.stopMonitoring(this.elRef.nativeElement);
|
||||||
|
if(this.valueAssignSubscription){
|
||||||
|
this.valueAssignSubscription.unsubscribe();
|
||||||
|
this.valueAssignSubscription = null;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//Configuration getters
|
//Configuration getters
|
||||||
|
@ -332,7 +373,8 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
|
||||||
const value = event.value;
|
const value = event.value;
|
||||||
// Add our fruit
|
// Add our fruit
|
||||||
if ((value || '').trim()) {
|
if ((value || '').trim()) {
|
||||||
this.optionSelectedInternal(value);
|
// this.optionSelectedInternal(value);
|
||||||
|
this.valueOnBlur.next(value);
|
||||||
}
|
}
|
||||||
// Reset the input value
|
// Reset the input value
|
||||||
if (input) {
|
if (input) {
|
||||||
|
|
|
@ -68,7 +68,8 @@ export class DmpInvitationDialogComponent extends BaseComponent implements OnIni
|
||||||
valueAssign: (item) => {
|
valueAssign: (item) => {
|
||||||
const result = typeof(item) === 'string' ? item : item.email;
|
const result = typeof(item) === 'string' ? item : item.email;
|
||||||
return result;
|
return result;
|
||||||
}
|
},
|
||||||
|
autoSelectFirstOptionOnBlur: true
|
||||||
};
|
};
|
||||||
|
|
||||||
add(event: MatChipInputEvent): void {
|
add(event: MatChipInputEvent): void {
|
||||||
|
|
Loading…
Reference in New Issue