Highlight first item in AutoComplete

[davladus]

**I'm submitting a usability bug

Plunkr Case (Bug Reports)
http://www.primefaces.org/primeng/#/autocomplete

Current/Expected behavior
Minimal reproduction of the problem with instructions

When I start typing letters (Advanced sample)
And selection dropdown is expanded
Then
Observed: nothing selected
Expected: first filtered item is selected

Please tell us about your environment:
Window 7, Chrome

[Mrtcndkn]

We reviewed this and this is expected behaviour.

[GFoley83]

Is there any way to programmatically default to the first item in the suggestion list, without having to click the down arrow key?

This makes even more sense if there's only one option is the suggestion list. Currently, the user always has to use the down arrow key to select the value, which seem redundant and forces an extra keyboard transaction for every search.

E.g Spain should be preselected here

[GFoley83]

@davladus I was able to get this functionality by dispatching a down arrow key event to the autocomplete component at the end of the completeMethod callback. Less than ideal solution but easy to refactor out later if PrimeNG adds native support (or I get around to adding it myself).
Working code:

import { AutoComplete } from 'primeng/primeng';

@ViewChild(AutoComplete) primeAutoCompleteComponent: AutoComplete;

    // (completeMethod)="search($event)"    
    search(event?: any) {
        // filter you search results array
        . . .    
        this.preSelectFirstOptionInResultsList();
    }

private preSelectFirstOptionInResultsList(): void {
    setTimeout(() => {

        let highlightItemIndex = this.primeAutoCompleteComponent.findOptionIndex(this.primeAutoCompleteComponent.highlightOption);

        if (highlightItemIndex < 0) {
            var arrowDownEvent = document.createEvent('Event');
            (<any>arrowDownEvent).initEvent('keydown', { "bubbles": false, "cancelable": false });
            Object.defineProperty(arrowDownEvent, 'which', { 'value': 40 });

            (<Node>this.primeAutoCompleteComponent.input).dispatchEvent(arrowDownEvent);
        }

    }, 0);
}

[Errabaany]

the feature is already implemented in version 16.9.3lst,
I am using the an older version and I can't update primeng at the moment,
I used @GFoley83 solution I just had to update it to fit my case since I am using multi select

setTimeout(() => {
    const arrowDownEvent = document.createEvent('Event');
    (<any>arrowDownEvent).initEvent('keydown', { "bubbles": false, "cancelable": false });
    Object.defineProperty(arrowDownEvent, 'which', { 'value': 40 });
    (<Node>this.inputElement.multiInputEl?.nativeElement).dispatchEvent(arrowDownEvent);
}, 0)