ionic-selectable: Cannot read property 'length' of undefined

Hello! I’m trying to use the component with Multiple Selection, InfiniteScroll and Search, but when I insert the onSearch() option in the html I’m always seeing this error: “Cannot read property ‘length’ of undefined”.

This is my element in the html file:

<select-searchable
    #professionComponent
    item-content
    [(ngModel)]="selectedProfessions"
    formControlName="professions"
    itemValueField="id_profession"
    itemTextField="name_profession"
    [items]="professions"
    [canSearch]="true"
    (onSearch)="searchProfs($event)"
    [isMultiple]="true"
    [isOkButtonEnabled]="professionComponent.itemsToConfirm.length >= 1 && professionComponent.itemsToConfirm.length <= 3"
    (onChange)="changeProfession($event)"
    [hasInfiniteScroll]="true"
    (onInfiniteScroll)="getMoreProfs($event)">
    <ng-template selectSearchableMessageTemplate>
        Selecciona máximo 3 profesiones
    </ng-template>
</select-searchable>

I have got defined all the methods for “onSearch”, “onChange” and “onInfiniteScroll” in the .ts file (3 different calls to the API to refresh the list). I detected that if I delete the (onSearch)=“searchProfs($event)” my code runs well without errors. I suppose the error is in the “onSearch” method.

How can I use Multiple Selection, InfiniteScroll and Search in the same component? Am I doing something wrong? Or the component doesn’t runs if trying all these options together?

Thanks in advance!

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Comments: 19 (8 by maintainers)

Most upvoted comments

Ah, thanks. That fixed it, sorry for missing that.

Guys, there were breaking changes in 2.8.1 version:

  • Removed infiniteScroll parameter from onInfiniteScroll and onSearch events. To update follow the steps below. Check out the demo as well.
  1. Replace event.infiniteScroll.enable(true); with event.component.enableInfiniteScroll();.
  2. Replace event.infiniteScroll.enable(false); with event.component.disableInfiniteScroll();.
  3. Replace event.infiniteScroll.complete(); with event.component.endInfiniteScroll();.