primeng icon indicating copy to clipboard operation
primeng copied to clipboard

Fix: Trigger `onSelect` event when multiple is true and typeahead is false in p-autocomplete

Open SehgalShaileen opened this issue 8 months ago • 1 comments

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:

  1. Set up p-autocomplete with multiple: true and typeahead: false.
  2. Manually add a value in the input field.
  3. The onSelect event 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

SehgalShaileen avatar Apr 17 '25 09:04 SehgalShaileen

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)"
            />

faileon avatar Jun 03 '25 08:06 faileon

While working on email chips using <p-autoComplete>, I noticed multiple broken behaviors:

  1. (onSelect) does not fire when [typeahead]="false.
  2. [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

sajagacharyadev-glitch avatar Aug 27 '25 06:08 sajagacharyadev-glitch