;
public searchControl: FormControl;
private subscriptions: any[] = [];
- /** Autocomplete */
- @Input()
- public autocompleteList: string[] = [];
- public autocompleteFilteredList: Observable;
@ViewChild('select') select: MatSelect;
@ViewChild('searchInput') searchInput: ElementRef;
focused: boolean = false;
@@ -231,17 +244,18 @@ export class InputComponent implements OnInit, OnDestroy, OnChanges {
if(this.type === 'logoURL') {
this.secure = (!this.initValue || this.initValue.includes('https://'));
}
- if (this.options && this.type === 'chips') {
+ if (this.options && (this.type === 'chips' || this.type === 'autocomplete')) {
this.filteredOptions = of(this.options);
this.searchControl = new FormControl('');
+ this.subscriptions.push(this.searchControl.valueChanges.subscribe(value => {
+ setTimeout(() => {
+ this.searchInput.nativeElement.focus();
+ this.searchInput.nativeElement.value = value;
+ },0);
+ }));
this.filteredOptions = this.searchControl.valueChanges.pipe(startWith(''),
map(option => this.filter(option)));
}
- if(this.autocompleteList && this.type === 'autocomplete') {
- this.autocompleteFilteredList = of(this.autocompleteList);
- this.autocompleteFilteredList = this.formControl.valueChanges.pipe(startWith(''),
- map(value => this.simpleFilter(value)));
- }
if (this.formControl && this.formControl.validator) {
let validator = this.formControl.validator({} as AbstractControl);
this.required = (validator && validator.required);
@@ -286,8 +300,6 @@ export class InputComponent implements OnInit, OnDestroy, OnChanges {
this.formAsArray.removeAt(index);
this.formAsArray.markAsDirty();
this.searchControl.setValue('');
- this.searchInput.nativeElement.focus();
- this.searchInput.nativeElement.value = '';
this.stopPropagation();
}
@@ -295,25 +307,21 @@ export class InputComponent implements OnInit, OnDestroy, OnChanges {
this.formAsArray.push(new FormControl(event.option.value));
this.formAsArray.markAsDirty();
this.searchControl.setValue('');
- this.searchInput.nativeElement.focus();
- this.searchInput.nativeElement.value = '';
this.stopPropagation();
}
private filter(value: string): Option[] {
- let options = this.options.filter(option => !this.formAsArray.value.find(value => option.value === value));
- if ((!value || value.length == 0) && !this.showOptionsOnEmpty) {
- return [];
+ let options = this.options;
+ if(this.type === "chips") {
+ options = options.filter(option => !this.formAsArray.value.find(value => option.value === value));
+ }
+ if ((!value || value.length == 0)) {
+ return (this.showOptionsOnEmpty)?options:[];
}
const filterValue = value.toString().toLowerCase();
return options.filter(option => option.label.toLowerCase().indexOf(filterValue) != -1);
}
- private simpleFilter(value: string): string[] {
- const filterValue = value.toLowerCase();
- return this.autocompleteList.filter(option => option.toLowerCase().includes(filterValue));
- }
-
add(event: MatChipInputEvent) {
if (this.addExtraChips && event.value) {
this.stopPropagation();
@@ -328,4 +336,10 @@ export class InputComponent implements OnInit, OnDestroy, OnChanges {
let option = this.options.find(option => option.value === value);
return (option) ? option.label : value;
}
+
+ resetSearch(event: any, value: string = null) {
+ event.stopPropagation();
+ this.formControl.setValue(null);
+ this.searchControl.setValue(this.getLabel(value));
+ }
}