title: Angular Primeng dropdown not highlighting items when arrow keys are moved up or down
body: <p>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>
  <pre><code>&lt;p-dropdown
      #dropdown
      [options]=&quot;options&quot;
      optionLabel=&quot;name&quot;
      dropdownIcon=&quot;fas fa-caret-down&quot;
      [(ngModel)]=&quot;value&quot;
      (onChange)=&quot;onValueChange()&quot;
      [placeholder]=&quot;placeholderText&quot;
      [disabled]=&quot;disabled || readonly&quot;
      [autoDisplayFirst]=&quot;config?.autoDisplayFirst&quot;
      [resetFilterOnHide]=&quot;true&quot;
      (onFocus)=&quot;onFocusHandler()&quot;
  &gt;
      &lt;ng-template let-option pTemplate=&quot;item&quot;&gt;
          &lt;span class=&quot;truncate-option-text&quot;&gt;{{ option?.name }}&lt;/span&gt;
      &lt;/ng-template&gt;
  &lt;/p-dropdown&gt;
  </code></pre>
  <p>Can anyone point me what am i doing wrong here and why it is not highlighting as it is shown in primeng documentation? <a href="https://www.primefaces.org/primeng-v11-lts/#/dropdown" rel="nofollow noreferrer">https://www.primefaces.org/primeng-v11-lts/#/dropdown</a></p>