Angular Primeng dropdown not highlighting items when arrow keys are moved up or down

Question

I am using Primeng v11.x in my Angular 11 application. For some reason the option items are not highlighting when i used keyboard arrows to select an option item from the dropdown list

<p-dropdown
    #dropdown
    [options]="options"
    optionLabel="name"
    dropdownIcon="fas fa-caret-down"
    [(ngModel)]="value"
    (onChange)="onValueChange()"
    [placeholder]="placeholderText"
    [disabled]="disabled || readonly"
    [autoDisplayFirst]="config?.autoDisplayFirst"
    [resetFilterOnHide]="true"
    (onFocus)="onFocusHandler()"
>
    <ng-template let-option pTemplate="item">
        <span class="truncate-option-text">{{ option?.name }}</span>
    </ng-template>
</p-dropdown>

Can anyone point me what am i doing wrong here and why it is not highlighting as it is shown in primeng documentation? https://www.primefaces.org/primeng-v11-lts/#/dropdown

Answer 1

TL;DR

The issue might come from your data. You should check for duplicates id or code in your options.

Details

I had a similar problem : some elements in the dropdown list were not selectable by keyboard. However, other elements were selectable.

This was caused by elements having the same id.

With :

 <p-dropdown
        [options]="ships"
        optionLabel="name"
        optionValue="id">
 </p-dropdown>

This causes the bug (because 2 items have the same id) :

public ships = [ 
    {id: '1',name: 'Ship 1'},
    {id: '1',name: 'Ship 2'},
    {id: '3',name: 'Ship 3'}
]

This works fines :

public ships = [ 
    {id: '1',name: 'Ship 1'},
    {id: '2',name: 'Ship 2'},
    {id: '3',name: 'Ship 3'}
]