Struggling to create a custom autocomplete feature with ag grid. Unable to update the returned value with the selected item from the dropdown list.
In simpler terms:
I input 'A' => Receive a list of options => Select one => The input should display the chosen value => Save it => But I still see 'A'
Here is the cellEditorSelector code snippet :
cellEditorSelector: (params) => {
const values = this.articles.map((item) => {
return {
text: item.code,
value: item.id,
};
});
return {
component: 'autoComplete',
params: {
values,
},
};
},
The custom component looks like this:
selector: 's1-ag-grid-auto-complete',
template: `<div class="flex flex-col gap-1">
<div class="relative">
<input
#input
class="w-full text-xs rounded-md border-gray-300 shadow-sm pr-6"
matInput
(input)="onInputChange($event)"
(change)="onChange($event)"
[matAutocomplete]="auto"
[value]="value"
s1AutocompleteForceSelection
type="text"
/>
</div>
<mat-autocomplete autoActiveFirstOption="true" #auto="matAutocomplete">
<mat-divider></mat-divider>
<mat-option *ngFor="let option of filteredList" [value]="option.value">
<ng-container>
<ng-container></ng-container>
</ng-container>
<span [title]="option.text" class="text-xs break-words">{{ option.text }} </span>
</mat-option>
</mat-autocomplete>
</div>`,
})
export class AgGridAutoCompleteComponent implements ICellEditorAngularComp {
public value: any;
public filteredList;
public options;
private params: any;
public agInit(params: any): void {
this.params = params;
this.value = params.value;
this.options = params.values;
}
public onInputChange(event: Event): void {
const inputValue = (event.target as HTMLInputElement).value;
if (inputValue != null && inputValue != '') {
const inputValueLowerCase = inputValue.toLowerCase();
this.filteredList = (this.options || []).filter((element) => {
return element.text.toLowerCase().includes(inputValueLowerCase);
});
} else {
this.filteredList = [];
}
}
public onChange($event) {
this.value = $event.target.value;
}
public getValue(): any {
return this.value;
}
}
Seeking suggestions or solutions. Any ideas?