primefaces / primeng

The Most Complete Angular UI Component Library
https://primeng.org
Other
9.82k stars 4.5k forks source link

Autocomplete: onSelect event is not always emitted #15895

Open ValentinCOC opened 1 week ago

ValentinCOC commented 1 week ago

Describe the bug

The error occurs primary on MS Edge browser (hard to reproduce in Chrome). When it occurs no event from onSelect is emitted.

Code: `<p-autoComplete *ngIf="!isRevision"

newSubtaskAutocomplete

[suggestions]="filterdNewSubtasks" [group]="true" (onFocus)="newSubtaskAutocomplete.handleDropdownClick($event)" [dropdown]="true" panelStyleClass="custom-group-panel top" [panelStyle]="{ 'min-height': '250px' }" (onSelect)="emitAddedStep($event)" (onBlur)="newSubtaskAutocomplete.hide()" (completeMethod)="filterNewSubtasks($event, newSubtaskAutocomplete.value)" [styleClass]="'with-dropdown'" [style]="{ width: '400px' }" placeholder="Schritt hinzufügen">

{{ group.label }}
{{ newSubtask.label }}

`

In the function for the onSelect event the input is cleared because the value gets processed.

public emitAddedStep($event): void { const selectedStep = $event.value; this.addedStep.emit(selectedStep.value as LfStep); setTimeout(() => { if (this.newSubtaskAutocomplete.clear) { this.newSubtaskAutocomplete.clear(); } }, 1); }

Maybe I am doing something terribly wrong, then please tell me :)

Environment

"@angular-devkit/build-angular": "16.2.12",
"@angular-devkit/core": "16.2.12",
"@angular-devkit/schematics": "16.2.12",
"@angular-eslint/eslint-plugin": "16.3.1",
"@angular-eslint/eslint-plugin-template": "16.3.1",
"@angular-eslint/template-parser": "16.3.1",
"@angular/cdk": "16.2.14",
"@angular/cli": "~16.2.0",
"@angular/compiler-cli": "^16.2.12",
"@angular/elements": "^16.2.12",
"@angular/language-service": "^16.2.12",
"@angular/animations": "^16.2.12",
"@angular/common": "^16.2.12",
"@angular/compiler": "^16.2.12",
"@angular/core": "16.2.12",
"@angular/forms": "^16.2.12",
"@angular/platform-browser": "^16.2.12",
"@angular/platform-browser-dynamic": "^16.2.12",
"@angular/router": "^16.2.12",
"primeicons": "^6.0.1",
"primeng": "16.9.1",

Reproducer

Stackblitz example

Angular version

16.2.12

PrimeNG version

16.9.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.17.0

Browser(s)

Edge

Steps to reproduce the behavior

  1. enter a search term
  2. select item
  3. enter another search term
  4. select other item (here it breaks and the second item is not emitted)

Expected behavior

onSelect-event always emits a value when an item was clicked

mehmetcetin01140 commented 6 days ago

Hi,

Could you please share a stackblitz example so we can identify the issue clearly?

ValentinCOC commented 5 days ago

@mehmetcetin01140 I added a stackblitz. To reproduce type 3 then click with the mouse and then i enter 4 and click again. At some point it will break and the latest selected value is not displayed on top of the autocomplete. I also need to use the onBlur event to hide the dropdown. Is the autocomplete intended to work like this?