Ionic-framework: ion-refresher + OnPush change detection strategy: css rules/classes don't change

Created on 4 Dec 2016  路  7Comments  路  Source: ionic-team/ionic-framework

Ionic version: (check one with "x")
[ ] 1.x
[X] 2.x

I'm submitting a ... (check one with "x")
[X] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
ion-refresher is glitchy with OnPush change detection strategy. The arrow and the pulling text doesn't appear, and on the rare occasion it appears, the arrow doesn't change direction. The div with the class refresher-pulling stays display: none.

Edit: made a plunker that illustrates the bug. In my project I was marking the component for change detection manually at specific points, that's why my description differs slightly from the behavior of the plunker.

Expected behavior:
Same as with Default change detection strategy. Arrow and pulling text appear as I pull down, the arrow changes direction when I pulled far enough.

Steps to reproduce:
http://plnkr.co/edit/RcxZd4cPYDYJMn42SD5N?p=info

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.4.0
Ionic CLI Version: 2.1.13
Ionic App Lib Version: 2.1.7
ios-deploy version: Not installed
ios-sim version: 5.0.11
OS: macOS Sierra
Node Version: v7.2.0
Xcode version: Xcode 8.2 Build version 8C30a

stale issue

Most helpful comment

This solved the problem for me.

<ion-refresher (ionRefresh)="doRefresh($event)" (ionPull)="{}">

All 7 comments

I'm having the same problem with the refresher using OnPush change detection strategy. Did you find any workarounds?

This solved the problem for me.

<ion-refresher (ionRefresh)="doRefresh($event)" (ionPull)="{}">

Thanks! This workaround made the pulling icon appear again, but after the refresh finishes the spinner keeps running in the background, just like on your plunker. Did you do something else to solve this too?

screen shot 2016-12-14 at 11 33 39

You should call the appropriate methods of ChangeDetectorRef if you use the OnPush strategy.

http://plnkr.co/edit/xBcBT1Jt5OvJNBYd3wGO

Thanks again! Now it's working perfectly!

Still an issue in 3.0.1. The (ionPull)="{}" hack works nicely.

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!

Was this page helpful?
0 / 5 - 0 ratings