Ion-Refresher bug on Google maps

I have a map that display markers and a list below the map, when I try to move the map down it trigget the refresher.

How can I solve this? Thank you!

<ion-content>

    <ion-refresher (ionRefresh)="refresh($event)">
        <ion-refresher-content
                pullingIcon="md-arrow-down"
                pullingText="Estira Para Actualizar...">
        </ion-refresher-content>
    </ion-refresher>

    <div [ngClass]="{'animate-fade-item': showData, 'fadeOut': !showData}">
        <div padding>
            <div id="map" class="nearbyMap"></div>
        </div>

        <ion-list *ngIf="showData">
             <ion-item></ion-item>
        </ion-list>
    </div>
</ion-content>

Ionic Info

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

    @ionic/cli-utils  : 1.16.0
    ionic (Ionic CLI) : 3.16.0

global packages:

    cordova (Cordova CLI) : 7.0.1 

local packages:

    @ionic/app-scripts : 1.3.7
    Cordova Platforms  : android 6.1.2 ios 4.3.1
    Ionic Framework    : ionic-angular 3.3.0

System:

    Android SDK Tools : 25.2.5
    ios-deploy        : 1.9.2 
    Node              : v8.6.0
    npm               : 5.3.0 
    OS                : macOS Sierra
    Xcode             : Xcode 9.0 Build version 9A235 

Why not disable the refresher function for this page? From a UX perspective, having both a scrollable/draggable map and a pull to refresh functionality in close vicinity is confusing and prone to errors.

The expected behavior is to trigger the refresher when the user pulls down on the list, not from the map.

I believe there is a directive to disable data tap. I’ll look that up. When you add it the component doesn’t pass input to ionic which is what you many need. I forgot what it is called in v2. In v1 it was called data-tap-disabled=true.

As it turns out ionic v2 doesn’t have an equivalent of v1 data-tap. However ion-refresh has an enabled attribute you can set to false. So one strategy may be to set it to false if you are operating on the map?

I set up a demo portal for you to see. To be honest its not working well - it sometimes doesn’t work at all and sometimes does, even though the refresh status is updated correctly. Maybe you can fiddle/play and come up with a reliable way (worked it out - see later)

It latches onto an event on the map to enable/disable refresh

1 Like

Thank you! I’m not using Angular Google Maps but the logic worked with me!

Sounds good.
Some notes (I just fixed the demo a few mins ago)

a) You must call refresher complete if you rely on a map event - once I did that, it works reliably. The demo is updated. If you don’t it will lock up (https://github.com/ionic-team/ionic/issues/13366) - this is because the map callback is called a bit late and refresh already starts showing - setting enabled = false at this stage without calling the complete/cancel event will mess it up

b) When I tested on iOS I noticed that “boundsChange” (or equivalent in your lib) is called late - so make sure you try another event to disable refresh

2 Likes

It now works better calling the refresher complete, I’m using drag event, it seems to work good on ios. thanks!

1 Like