Autocomplete: Down/Up arrows trigger (onSelect) event when [autoHighlight]="true"

[ninjavis]

Describe the bug

As the title indicates, the arrow buttons no longer work for selecting an autocomplete option. It immediately triggers the (onSelect) event when [autoHighlight]="true".

The below code works:

<p-autoComplete
      formControlName="selectedCountry"
      [suggestions]="filteredCountries"
      (onSelect)="selecter($event.value)"
      (completeMethod)="filterCountry($event)"
      field="name"
    ></p-autoComplete>

The code below does not:

<p-autoComplete
      [autoHighlight]="true"
      formControlName="selectedCountry"
      [suggestions]="filteredCountries"
      (onSelect)="selecter($event.value)"
      (completeMethod)="filterCountry($event)"
      field="name"
    ></p-autoComplete>

Environment

Win 11
Angular CLI: 17.3.2
Node: 18.16.1
Package Manager: npm 9.5.1
OS: win32 x64

Angular: 17.3.1
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1703.2
@angular-devkit/build-angular 17.3.2
@angular-devkit/core 17.3.2
@angular-devkit/schematics 17.3.2
@angular/cdk 13.3.4
@angular/cli 17.3.2
@schematics/angular 17.3.2
rxjs 7.8.1
typescript 5.4.3
zone.js 0.14.4

primeng 17.12.0

Reproducer

https://stackblitz.com/edit/hzfsyn?file=src%2Fapp%2Fdemo%2Fautocomplete-reactive-forms-demo.ts,src%2Fapp%2Fdemo%2Fautocomplete-reactive-forms-demo.html

Angular version

17.3.2

PrimeNG version

17.12.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.16.1

Browser(s)

Opera One 108.0.5067.29

Steps to reproduce the behavior

As described, merely add [autoHighlight]="true" to the p-autoComplete component.
Search for autocomplete suggestions.
Press the down arrow on the keyboard to try and select an option.
You'll see that the (onSelect) event fires, which it shouldn't, because this event is often used for POST/PATCH API calls.

Expected behavior

The arrow buttons should not trigger the p-autoComplete (onSelect) event.

[maruthumj]

@ninjavis I will start work on this

[RanjithkumarRajendran]

Is this fix can support Primeng Version 16.9.1?

Issue is same:
As described, merely add [autoHighlight]="true" to the p-autoComplete component.
Search for autocomplete suggestions.
Press the down arrow on the keyboard to try and select an option.
You'll see that the (onSelect) event fires, which it shouldn't, because this event is often used for POST/PATCH API calls.

if we are making AutoHighlight as false, On Down arrow, system is not showing the highlighted one.

[ninjavis]

Thank you!

[cagriman]

I don't know the cause but my issue not worked with this updated version.

I fixed my issue like this;

HTML

<p-autoComplete #autoCompleteInput [(ngModel)]="searchSelectedNode" [suggestions]="filteredItems" 
optionLabel="label" placeholder = "Search in" [showClear]="true" emptyMessage="No Result Found" 
[showEmptyMessage]="true" [dropdown]="true" [autoHighlight]="true" [style]="{ width: '100%' }" 
[inputStyle]="{ width: '100%' }" (completeMethod)="filterSearchResult($event)" (onSelect)="onSelect($event)" 
(keydown.enter)="onKeydownEnter()" (keydown.numpadenter)="onKeydownEnter()" />

TS

filterSearchResult(event: any) {
    this.filteredItems = [...this.searchResults]; 
  
    this.filteredItems = this.filteredItems.filter(item => 
      item.label.toLowerCase().includes(event.query)
    );  
}

  onSelect(event: any) {
    event.originalEvent.preventDefault();
    if(event.originalEvent instanceof PointerEvent) {
          // do something 
     }
  }

  onKeydownEnter() {
    // do something 
  }