Refinement List Item Label Not Changing

[asithade]

Describe the bug 🐛

Unable to change the label of refinement list item using angular-instantsearch@3.0.0-beta.5

To Reproduce 🔍

 <ais-refinement-list attribute="averageRating" searchable class="search-list-refinement"
      [transformItems]="convertToStars">
 </ais-refinement-list>

  public convertToStars(items: RefinementListItem[]): RefinementListItem[] {
    return items.map(
      (item: RefinementListItem): RefinementListItem => ({
        ...item,
        label: `Label: ${item.label}`
      })
    );
  }

https://codesandbox.io/s/awesome-proskuriakova-9hmpz

Looks like this issue is happening in other versions too.

Expected behavior 💭

Should change the label.

[Haroenv]

Hi, the value used in refinementlist for now is highlighted (even when not searchable), not label, so you should transform that one as well.

https://codesandbox.io/s/amazing-aryabhata-ezedp?file=/src/app/app.component.ts:512-559

[asithade]

Hi, the value used in refinementlist for now is highlighted (even when not searchable), not label, so you should transform that one as well.

https://codesandbox.io/s/amazing-aryabhata-ezedp?file=/src/app/app.component.ts:512-559

If that's the case, then the type definition for RefineListItem should be updated. Currently it is set to the following:

export declare type RefinementListItem = {
    value: string;
    label: string;
    count: number;
    isRefined: boolean;
};

[Haroenv]

Good catch, thanks!

[tkrugg]

fixed now that the types come from InstantSearch.js