When the Input is clicked, autofocus works only on the first instance - therefore the 'list-formatter' (autocompleListFormatter) is initiated only once.
https://i.sstatic.net/z1GC4.gif
Is there a way to have 'autofocus' focus multiple times?
dropdown.component.html
<form [formGroup]="myForm" class="">
<div class="form-style">
<input
autofocus
[list-formatter]="autocompleListFormatter"
type="text"
class="form-control"
ngui-auto-complete
formControlName="costCenter"
[source]="dropdownData"
value-property-name="id"
display-property-name="name"
[(ngModel)]="value"
/>
</div>
</form>
dropdown.component.ts
export class DropdownComponent implements OnInit, AgEditorComponent {
@Input() name: String;
public dropdownData = ColumnData[0].cellEditorParams.values;
public myForm: FormGroup;
public selected;
value: any;
oldValue: any;
params: any;
public container;
constructor(private builder: FormBuilder, private _sanitizer: DomSanitizer) {}
// ****DROPDOWN****** //
autocompleListFormatter = (data: any) => {
let html = `<span>${data.name}</span>`;
return this._sanitizer.bypassSecurityTrustHtml(html);
};
refresh(params: ICellEditorParams) {
this.params.api.refreshCells();
return true;
}
getValue(): any {
if (this.value === '') {
this.value = this.oldValue;
}
return this.value;
}
agInit(params: ICellEditorParams) {
this.value = params.value;
this.oldValue = this.value;
this.value = '';
return this.value;
}
ngOnInit() {
this.myForm = this.builder.group({
costCenter: ''
});
}
}
Update: It has been suggested to use an auto-focus directive. The directive was added to the code but it is not functioning properly