[Object object] in input field when getting object - NbAutoComplete

[aksth]

Issue type

I'm submitting a ... (check one with "x")

• [x] bug report
• [] feature request

Issue description

Current behavior: By selecting the option, we get primitive values only.

Expected behavior: We should be able to get the object too.

Related code:

<input
  #autoInput
  nbInput
  id="country"
  type="text"
  (input)="onCountryChange()"
  placeholder="Country"
  [nbAutocomplete]="auto"
/>

<nb-autocomplete #auto (selectedChange)="onSelectionChange($event)">
  <nb-option *ngFor="let country of filteredCountries$ | async" [value]="country">
    {{ country.englishName }}
  </nb-option>
</nb-autocomplete>

Here, I should be able to select the country object. I am able to technically select it but the text in the input field shows "[Object object]". Seems like whatever is set in nb-option element's [value] attribute is getting set on the input element too.

[aksth]

For now I solved it using (click) handler in nb-option. Like this: <nb-option *ngFor="let country of filteredCountries$ | async" [value]="country" (click)="onClick(country)">

[kmb385]

I second this proposal.

[kmb385]

@aksth You should handle a keypress too. What if they press enter? I do appreciate your solution, just trying to contribute.

[fquiroz]

@aksth I solved implementing [handleDisplayFn]="viewHandle" and if I want to show "miFieldToDisplay" : viewHandle(value: any) { return value?.miFieldToDisplay?value?.miFieldToDisplay : value; }

and I changed filter function: private filter(value: any): string[] { const filterValue = value?.miFieldToDisplay? value.miFieldToDisplay :value.toLowerCase(); return this.countries?.filter(optionValue => optionValue?.miFieldToDisplay?.toLowerCase().includes(filterValue)); }

[AjithDass]

@aksth I solved implementing [handleDisplayFn]="viewHandle" and if I want to show "miFieldToDisplay" : viewHandle(value: any) { return value?.miFieldToDisplay?value?.miFieldToDisplay : value; }

and I changed filter function: private filter(value: any): string[] { const filterValue = value?.miFieldToDisplay? value.miFieldToDisplay :value.toLowerCase(); return this.countries?.filter(optionValue => optionValue?.miFieldToDisplay?.toLowerCase().includes(filterValue)); }

This view Handle cannot update. previous value present in here how to update this?