Ion-Refresher bug on Google maps

Ionic Framework ionic-v3
1

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
2

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.

3

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

4

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.

5

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?

6

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
7

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

8

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
9

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

1 Like