Problem with ion-refresher and ion-alpha-scroll

[Hanzofm]

Hi,

My problem is related when uses a ion-refresher with this plugin, when I pull to refresh the alphabet index pulls down and not return to their position.

Is there any solution for this?

This is my template:

<ion-content no-bounce>
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content
      pullingText="{{'pullto' | translate}}">
    </ion-refresher-content>
  </ion-refresher>

  <ion-alpha-scroll
    [listData]="favorites"
    key="title"
    [itemTemplate]="alphaScrollItemTemplateRef"
    [currentPageClass]="currentPageClass"
    [triggerChange]="triggerAlphaScrollChange">

    <ng-template #alphaScrollItemTemplateRef let-item>
      <button (click)="currentPageClass.onItemClick(item)" class="padding" mode="md" no-padding no-lines no-margin full ion-item>
        <ion-label>
          {{item.title}}
        </ion-label>
        <img item-end src="{{'assets/icon/' + item.icon + '.svg'}}">
      </button>
    </ng-template>
  </ion-alpha-scroll>
</ion-content>

ionic info (Alpha Scroll Plugin version 2.0.1)

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 8.0.0 

local packages:

    @ionic/app-scripts : 3.1.9
    Cordova Platforms  : android 6.4.0 ios 4.5.4
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.1.1
    ios-deploy        : 1.9.2 
    ios-sim           : 6.1.2 
    Node              : v9.9.0
    npm               : 5.7.1 
    OS                : macOS High Sierra
    Xcode             : Xcode 9.3 Build version 9E145 

[leonardogbr]

@Hanzofm

I faced the same issue, but I found a workaround for this. It happens because ion-refresher set the top style property and alpha-scroll also do this. So when you use the refresher for first time it duplicates the top property of alpha scroll.

Workaround:

In your template set an ID for the alpha-scroll

<ion-content no-bounce>
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content
      pullingText="{{'pullto' | translate}}">
    </ion-refresher-content>
  </ion-refresher>

  <ion-alpha-scroll #alphaScroll
    [listData]="favorites"
    key="title"
    [itemTemplate]="alphaScrollItemTemplateRef"
    [currentPageClass]="currentPageClass"
    [triggerChange]="triggerAlphaScrollChange">
    ...
  </ion-alpha-scroll>
</ion-content>

In your page.ts use ViewChild to get alpha scroll element and than change doRefresh function. Set top: 0px to the .ion-alpha-sidebar. Something like this:

import { Component, ViewChild, ElementRef } from "@angular/core";
...
export class YourPage{

  @ViewChild("alphaScroll", { read: ElementRef }) alphaScroll: ElementRef;
  ...
  doRefresh(refresher) {
    for (let element of this.alphaScroll.nativeElement.childNodes) {
      if (element.className == 'ion-alpha-sidebar') {
        element.style.top = '0px';
      }
    }
    ...
  }  
}

It solved the problem for me. It's not a good solution but for now it works.

Hope it Helps.