Pagination allows clicking on next & last buttons when there are no results

[dotboris]

Bug 🐞

What is the current behavior?

When you have a search with no results, the pagination will render in a way where the next & last buttons are clickable. This doesn't make much sense since there's no second page when there are no results.

Make a sandbox with the current behavior

Instead of creating a sandbox, I've managed to reproduce this on the live demo (storybook) from the documentation.

1. Open https://vue-instantsearch.netlify.app/stories/?selectedKind=ais-pagination&selectedStory=default&full=0&addons=1&stories=1&panelRight=1&addonPanel=storybooks%2Fstorybook-addon-knobs
2. Type somethingthatwillnevermatch in the search bar

You'll notice that the pagination is rendered as if I can click to go to the next / last page. The buttons are clickable but they do nothing.

What is the expected behavior?

I expect the pagination to either vanish or render in a completely disabled state where the next & previous buttons look like they're disabled.

Note that the instantsearch.js lib seems to handle this gracefully as it hides the pagination when there are no results. Here's the e-commerce example handling this edge case: https://instantsearchjs.netlify.app/examples/e-commerce/search/?query=somethingthatwillnotmatchforsure

Does this happen only in specific situations?

Only when there are no search results.

What is the proposed solution?

Either the show the buttons as disabled or hide the whole thing.

What is the version you are using?

vue-instantsearch@2.7.0

[dotboris]

I've done some digging and it seems like the issue is in the pagination connector in instantsearch.js.

Both the next & last buttons check the state.isLastPage value to see if they should render:

vue-instantsearch/src/components/Pagination.vue

Lines 116 to 129 in 4f8eb4b

	<template v-if="!state.isLastPage">
	<a
	:class="suit('link')"
	aria-label="Next"
	:href="state.createURL(state.currentRefinement + 1)"
	@click.prevent="refine(state.currentRefinement + 1)"
	>›</a>
	</template>
	<template v-else>
	<span
	:class="suit('link')"
	aria-label="Next"
	>›</span>
	</template>

vue-instantsearch/src/components/Pagination.vue

Lines 146 to 159 in 4f8eb4b

	<template v-if="!state.isLastPage">
	<a
	:class="suit('link')"
	aria-label="Last"
	:href="state.createURL(state.nbPages - 1)"
	@click.prevent="refine(state.nbPages - 1)"
	>››</a>
	</template>
	<template v-else>
	<span
	:class="suit('link')"
	aria-label="Last"
	>››</span>
	</template>

state.isLastPage comes from connectPagination

https://github.com/algolia/instantsearch.js/blob/61b19b87ae3afdabde8ef355e3b727059ae59911/src/connectors/pagination/connectPagination.js#L149

(Github is not showing me a snippet here, so I'm doing it by hand)

        renderFn(
          {
            createURL: this.createURL(state),
            currentRefinement: page,
            refine: this.refine,
            nbHits: results.nbHits,
            nbPages,
            pages: pager.pages(),
            isFirstPage: pager.isFirstPage(),
            isLastPage: pager.isLastPage(),
            widgetParams,
            instantSearchInstance,
          },
          false
        );

It's value comes from the paginator class. I think that this is where the bug is:

https://github.com/algolia/instantsearch.js/blob/61b19b87ae3afdabde8ef355e3b727059ae59911/src/connectors/pagination/Paginator.js#L50-L52

(Github is not showing me a snippet here, so I'm doing it by hand)

  isLastPage() {
    return this.currentPage === this.total - 1;
  }

When there are no results, the current page is 0 and the total number of pages is 0. So it checks

0 === 0 - 1

which is always false.

Should I have opened an issue in instantsearch.js instead?

[Haroenv]

Thanks for your thorough look into this! You've indeed seemed to identify what's going on, if you want to make a pull request here that would be appreciated. Note that Vue InstantSearch (for now) is using InstantSearch v3 (not yet v4, latest)

[Haroenv]

I've made a pull request to InstantSearch.js (v4 first) with your suggestion: algolia/instantsearch#4422 thanks a lot! I'll also follow it up with a PR for v3 so we can have this fixed in Vue InstantSearch too.