2

hope you're all doing well. I am currently struggling with the AutoComplete (Multiple mode) component behaviour of primaryNG.

What I want

I would like for the AutoComplete suggestions list to appear whenever the component is in focus.

What I have tried

Following default primeNG default input properties to set suggestions to apear on focus [(CompleteOnFocus=True)] works partially. Now whenever I click on the AutoComplete component for the FIRST time, the AutoComplete suggestions appear. However, upon choosing an item from the suggestions, the suggestion list disappears (I want it to remain open). To make the suggestions appear again I have to click outside to unfocus the component and then click on the component again to refocus it. (See the first stackblitz component)

I could show the suggestion list by passing in the reference to and sending it to (onHide) function like this:

<p-autoComplete #autocomplete [multiple]="true" [(ngModel)]="selectedItem" 
[suggestions]="suggestions" (completeMethod)="search($event)" 
(onHide)="refocus(autocomplete)"> </p-autoComplete>

and then trigger the show function using:

import { AutoComplete, AutoCompleteModule } from 'primeng/autocomplete';
public refocus(autocomplete: AutoComplete) {
autocomplete.show();
}

But it turns out that it breaks when I select multiple items from the suggestion list and then delete them all; the suggestion list doesn’t show up anymore. (See the second stackblitz component)

Ixion Chowdhury
  • 140
  • 11
Fahim Foysal
  • 71
  • 4

1 Answers1

0

You can use (onFocus),(onHide) event to trigger show() method using template ref directly. Even after multiple deletions, focusing, refocusing I got suggestions.

<span class="p-fluid">
<p-autoComplete #autocomplete
[(ngModel)]="selectedCountries"
[suggestions]="filteredCountries"
(completeMethod)="filterCountry($event)"
field="name"
[multiple]="true"
display="chip"
[forceSelection]="true"
[completeOnFocus]="true"
(onFocus)="autocomplete.show()" <----------- onFocus
(onHide)="autocomplete.show()"  <----------- onHide
>
<ng-template let-country pTemplate="item">
  <div
    *ngIf="country.isSelected"
    style="text-decoration: line-through; opacity: 50%"
  >
    {{ country.name }}
  </div>
  <div *ngIf="!country.isSelected">{{ country.name }}</div>
</ng-template>
</p-autoComplete>
</span>
Nenad Radak
  • 3,550
  • 2
  • 27
  • 36