Problem with item selection when customFilter used

Problem with item selection when customFilter used

I try to use customFilter option to display firstName and lastName values in select.

I succed to have values appear in autocomplete dropdown, but when click to select one, the select stay blank.

My entity :

export class Exploitant {
    id:number;
    nom:string;
    prenom:string;
    mail:string;
    tel:string;
    adresse:string;
    codePostal: number;
    commune: string;
}

My filter function :

filterName(items: any[], query: string) {
    var results:any[] = [];
    items.forEach(
      (item) => {
        if( (item['prenom']+' '+item['nom']).toLowerCase().indexOf(query.toLowerCase()) > -1 ) {
          results.push(item);
        }
      }
    );
    return results;
  }

and the html I use :

<div class="ng-autocomplete">
    <ng-autocomplete 
      [data]="exploitants"
      [initialValue]=""
      [customFilter]="filterName"
      formControlName="exploitant"
      notFoundText="Not found"
      [itemTemplate]="itemExploitantTemplate"
      [notFoundTemplate]="notFoundTemplate">                                 
    </ng-autocomplete>
    
    <ng-template #itemExploitantTemplate let-item>
    <a>
        <span [innerHTML]="item.prenom"></span>&nbsp; 
        <span [innerHTML]="item.nom"></span>
    </a>
    </ng-template>
    
    <ng-template #notFoundTemplate let-notFound>
        <div [innerHTML]="notFound"></div>
    </ng-template>
</div>

Expected result

Selected item should appear in the select with a cross at the right to clear it

Actual result

Nothing appear in the select after click on an item in the dropdown, and autocomplete seems to be broken. When trying to write more stuff in select, in get some errors in console :

ERROR TypeError: text.replace is not a function at HighlightPipe.transform (angular-ng-autocomplete.js:1587) at pureFunction3Internal (core.js:25603) at Module.ɵɵpipeBind3 (core.js:25778) at AutocompleteComponent_li_10_div_2_Template (angular-ng-autocomplete.js:92) at executeTemplate (core.js:9518) at refreshView (core.js:9387) at refreshEmbeddedViews (core.js:10507) at refreshView (core.js:9411) at refreshEmbeddedViews (core.js:10507) at refreshView (core.js:9411)

Steps to reproduce

1. Click in the select
2. Click on an item in the dropdown
3. Bug

Context

Autocomplete on items having firstName and lastName.

Your Environment

• Version used: 2.0.5
• Browser Name and version: Chromium 88.0.4324.150
• Operating System and version: Ubuntu (latest)

[jusabatier]

Huge thanks ! This solution work well :

1. Add a fullName property on the model :

export class Exploitant {
    id:number;
    nom:string;
    prenom:string;
    mail:string;
    tel:string;
    adresse:string;
    codePostal: number;
    commune: string;

    fullName:string;
}

1. Set this field value in the REST service which handle the update of the data :

[...]
  getExploitants():Promise<any> {
    return this.httpClient.get<Exploitant[]>(environment.API_URL+'/exploitant').toPromise().then(
      (exploitants) => {
        exploitants.map( exploitant => exploitant.fullName = `${exploitant.prenom} ${exploitant.nom}`);
        return exploitants;
      }
    );
  }

  getExploitant(id:number):Promise<any> {
    return this.httpClient.get<Exploitant>(environment.API_URL+'/exploitant/'+id).toPromise().then(
      (exploitant) => {
        exploitant => exploitant.fullName = `${exploitant.prenom} ${exploitant.nom}`;
        return exploitant;
      }
    );
  }
[...]

1. Use the fullName property as searchKeyword value :

<div class="ng-autocomplete">
    <ng-autocomplete 
      [data]="exploitants"
      [initialValue]=""
      [searchKeyword]="'fullName'"
      formControlName="exploitant"
      notFoundText="Not found"
      [itemTemplate]="itemExploitantTemplate"
      [notFoundTemplate]="notFoundTemplate">                                 
    </ng-autocomplete>
    
    <ng-template #itemExploitantTemplate let-item>
    <a [innerHTML]="item.fullName"></a>
    </ng-template>
    
    <ng-template #notFoundTemplate let-notFound>
        <div [innerHTML]="notFound"></div>
    </ng-template>
</div>

And with this it work well, no more customFilter to use.

[gmerabishvili]

@jusabatier Great!