Fix: Trigger `onSelect` event when multiple is true and typeahead is false in p-autocomplete
Describe the bug
Issue:
When using the p-autocomplete component with multiple: true and typeahead: false, the onSelect event is not triggered when a new item is added manually.
https://stackblitz.com/edit/github-r87asf7e-ppy2ke4s
Steps to Reproduce:
- Set up p-autocomplete with
multiple: trueandtypeahead: false. - Manually add a value in the input field.
- The
onSelectevent is not triggered.
Expected Behavior:
The onSelect event should be triggered when a new item is added manually.
Actual Behavior:
The onSelect event is not triggered when manually adding a value.
Fix:
The issue was fixed by calling onSelect explicitly in the onEnterKey method when multiple: true and typeahead: false.
StackBlitz Link https://stackblitz.com/edit/github-r87asf7e-ppy2ke4s
Pull Request Link
https://github.com/primefaces/primeng/pull/18098
Reason for not contributing a PR
- [ ] Lack of time
- [ ] Unsure how to implement the fix/feature
- [ ] Difficulty understanding the codebase
- [ ] Other
Other Reason
No response
Reproducer
https://stackblitz.com/edit/github-r87asf7e-ppy2ke4s
Environment
Environment:
- PrimeNG Version: 19.2.3
- Angular Version: 19.2.3
https://stackblitz.com/edit/github-r87asf7e-ppy2ke4s
Angular version
19.2.3
PrimeNG version
v19
Node version
No response
Browser(s)
No response
Steps to reproduce the behavior
https://stackblitz.com/edit/github-r87asf7e-ppy2ke4s
Expected behavior
Alert should be there
There is actually multiple bugs in autocomplete depending on which booleans you toggle.. It's actually mind boggling how broken autocomplete is in this library. For example with the following setup the onComplete method will not be triggered - you must remove typehead=false to get onComplete to function...
<p-autoComplete
[ngModel]="tagsModel()"
(ngModelChange)="onTagsChanged($event)"
[multiple]="true"
[suggestions]="suggestions()"
[typeahead]="false"
(completeMethod)="onComplete($event)"
/>
While working on email chips using <p-autoComplete>, I noticed multiple broken behaviors:
-
(onSelect)does not fire when[typeahead]="false. -
[unique]="true"is not respected; duplicates are still added (also causes crash if typeahead is true when multiple).
Steps to Reproduce
<p-auto-complete
multiple
[unique]="true"
[typeahead]="false"
(onSelect)="validateEmailChip($event, 'to')"
formControlName="to">
</p-auto-complete>
Notes
- Both seem related to the current autocomplete options & emitters being unreliable.
- For now, I am observing the formControl values directly in order to validate emails and duplicates.
Environment
- PrimeNG Version: 20.0.1
- Angular Version: 20.1.4