Search code examples
angulareventsangular8primengangular-components

completeMethod event not triggering in primeNG Autocomplete on focus


I am trying to use the autocomplete component in my application. The autocomplete in the HTML looks something like this:

<p-autoComplete [(ngModel)]="student" name="basic"
  [suggestions]="filteredStudents"
  (completeMethod)="filterStudents($event)"
  field="name" [size]="30"
  placeholder="Select student" [minLength]="0">
</p-autoComplete>

If you notice I have specified the "minLength" as 0. The need for this was to try load the suggestions as soon as I focus on the autocomplete input field (non-filtered of course). But unfortunately this does not happen. Interestingly though when I enter some characters and clear them off the suggestions appear as expected. Anything which I might be doing wrong here?

Just a note that I also tried to make use of the "onFocus" event which too did not work.

TIA


Solution

  • Using handleDropdownClick() can be used as workaround.

    <p-autoComplete #ac [(ngModel)]="student" name="basic"
     [suggestions]="filteredStudents"
     (onFocus)="triggerOverlayPanel(ac)"
     (completeMethod)="filterStudents($event)"
     field="name" [size]="30"
     placeholder="Select student" [minLength]="0">
    </p-autoComplete>
    

    ts file.

    AutoComplete ref trigger handleDropdownClick() as if user clicked on dropdown and as argument add self.

     triggerOverlayPanel(ac: AutoComplete){
      // condition added to check if no chars need to display result 
      if(ac.minLength === 0) {
       ac.handleDropdownClick(ac);
      }
     }