Search code examples
ionic-frameworkionic4

ionic - when using ion-refresher ion-item is not clickable

My page has a list of clickable items, calling openNotification function and it worked just fine. I've added ion-refresher to the page, and then the click event stopped working...

what am I doing wrong?

<ion-content class="notifications-content">
  <ion-refresher slot="fixed" (ionRefresh)="refresh($event)">
    <ion-refresher-content>
      <ng-container *ngIf="notifications">
        <ion-item-group>
          <ion-item-sliding *ngFor="let notification of notifications">
            <ion-item class="notification-item" lines="none" button (click)="openNotification(notification)">
              <ion-row class="notification-item-wrapper" [class.unread]="!notification.isViewed">
                <ion-col size="9" class="details-wrapper">
                  <h2 class="details-name">{{ notification.title }}</h2>
                  <p class="details-description">
                    {{ notification.content}}</p>
                </ion-col>
                <ion-col size="3" class="date-wrapper">
                  <h3 class="notification-date">{{ notification.date| date:'HH:mm dd/MM' }}</h3>
                </ion-col>
              </ion-row>
          </ion-item-sliding>
        </ion-item-group>
      </ng-container>
     </ion-refresher-content>
  </ion-refresher>
</ion-content>
Solution

  • The ion-refresher used here as a wrapper to your list, and what you need to do is just move your list outside ion-refresher like this

    <ion-content class="notifications-content">
    <ion-refresher slot="fixed" (ionRefresh)="refresh($event)">
      <ion-refresher-content></ion-refresher-content>
    </ion-refresher>
    <ng-container *ngIf="notifications">
        <ion-item-group>
          <ion-item-sliding *ngFor="let notification of notifications">
            <ion-item class="notification-item" lines="none" button (click)="openNotification(notification)">
              <ion-row class="notification-item-wrapper" [class.unread]="!notification.isViewed">
                <ion-col size="9" class="details-wrapper">
                  <h2 class="details-name">{{ notification.title }}</h2>
                  <p class="details-description">
                    {{ notification.content}}</p>
                </ion-col>
                <ion-col size="3" class="date-wrapper">
                  <h3 class="notification-date">{{ notification.date| date:'HH:mm dd/MM' }}</h3>
                </ion-col>
              </ion-row>
          </ion-item-sliding>
        </ion-item-group>
      </ng-container>
  </ion-content>

    References: