Vue-instantsearch: For ais-pagination component event page-change doesn't fire on IOS

[alvaxet]

Hi guys,

For ais-pagination component event page-change doesn't fire on IOS, Chrome. This is the code I use:
<ais-pagination :padding="1" v-on:page-change="scrollUp"></ais-pagination>

Pagination itself does work on IOS. Event does fire when I test it on laptop (MacOS). Seems like it's IOS specific. I use IOS 11.2, IPhone 6s. Chrome version: 63.0.3239.

[rayrutjes]

Thanks for submitting that @alvaxet .

That sounds like a bug to me.

However, we leverage a native Vue method $emit here: https://github.com/algolia/vue-instantsearch/blob/master/src/components/Pagination.vue#L100
If the pagination works, then the event should be fired.

Could you share your implementation maybe?

[alvaxet]

Yes, I can see that $emit, however, when I inject console.log or alert in callback function (in my case its scrollUp function) for that event I don't get anything on IOS.

I can not share all the code, but these pieces should be enough:

main.js:

import Vue from 'vue';

// Enable debug mode
Vue.config.debug = true;
Vue.config.devtools = true;

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios);

import InstantSearch from 'vue-instantsearch';
import Multiselect from 'vue-multiselect'

Vue.use(InstantSearch);

// register globally
Vue.component('candidate-search', require('./components/CandidateSearch.vue'));
Vue.component('vue-multiselect', Multiselect);


new Vue({
    el: '#candidates-search-app',
});

HTML:

<div id="candidates-search-app">
        <candidate-search></candidate-search>
</div>

Component:

<template>
    <ais-index
            :app-id="env.app_id"
            :api-key="env.api_key"
            :index-name="env.index_name"
            :query-parameters="queryParameters"
    >

        <div class="row">
            <div class="col-md-12">
                <div class="search-block">
                    <!--Filters-->
                </div>
            </div>

            <div class="col-md-12" id="search-results">
                <em>
                    <ais-stats>
                        <template slot-scope="{ totalResults, processingTime, query }">
                            About {{ totalResults }} results (<small>{{ processingTime }}ms</small>)
                        </template>
                    </ais-stats>
                </em>
            </div>

            <div class="clearfix"></div>

            <ais-results>
                <template slot-scope="{ result }">
                    <search-item :item="result" :trans="trans.item"></search-item>
                </template>
            </ais-results>

            <div class="col-md-12 text-center">
                <div class="search-pagination-xs">
                    <ais-pagination :padding="1" v-on:page-change="scrollUp"></ais-pagination>
                </div>
                <div class="search-pagination-sm">
                    <ais-pagination :padding="2" v-on:page-change="scrollUp"></ais-pagination>
                </div>
                <div class="search-pagination-md">
                    <ais-pagination :padding="5" v-on:page-change="scrollUp"></ais-pagination>
                </div>
            </div>

        </div>
    </ais-index>
</template>

Let me know if you need any additional info

[rayrutjes]

Could you also share the implementation of "scrollUp"?

Does it work if you leave only 1 of the 3 pagination components?

BTW, I would try to not use 3 pagination items but 1 and change the surrounding wrapper class.

[alvaxet]

scrollUp: function () {
            alert('test scrollUp function');
            this.$nextTick(function () {
                $('html').animate({ scrollTop: $('#search-results').offset().top-60 }, 400);
            })
        }

It still doesn't work if I leave just one pagination component. It works just fine with 3 of them when I test it on laptop

[rayrutjes]

Could it be that:

• alert is somehow being skipped by iOS?
• at the same time you might be facing a mobile limitation on scrollTop? https://blog.jonathanargentiero.com/jquery-scrolltop-not-working-on-mobile-devices-iphone-ipad-android-phones/

[alvaxet]

@rayrutjes both :-)

Thank you for your help, closing the issue

[Haroenv]

So the issue was with jQuery in the end?

[rayrutjes]

@alvaxet if you have a second, please share what you did to solve the problem, we are pretty curious :)

[alvaxet]

Yes, the issue was with jQuery at the end.

1. alert didn't appear because of the cache, after I've cleared the cache I started to see it. Which means that it does fire the event and the problem is inside the scroll

2. Changing
   $('html').animate({ scrollTop: $('#search-results').offset().top-60 }, 400);
   to
   $('body').animate({ scrollTop: $('#search-results').offset().top-60 }, 400);

fixed it. So it wasn't vue-instantsearch problem at all

Thank you for your time guys

[rayrutjes]

Thanks for sharing the solution!

[jonathan-bird]

@alvaxet I know this is a closed thread, but for future people trying this. The full solution (without jQuery) is:

In methods:

onPageChange() {
    this.$nextTick(function () {
        window.scrollTo({
            top: document.querySelector('.products-list').offsetTop - 60,
            left: 0,
            behavior: 'smooth'
        });
    });
},

In template:

<ais-pagination v-on:page-change="onPageChange" />