v2 - refinement list show more does not work when search box has text

jryd commented 5 years ago

Bug 🐞

What is the current behavior?

I have a refinement list that is searchable and has the ability to show more:

<ais-refinement-list attribute="my-search-attributre"
    :limit="5"
    :show-more="true"
    :show-more-limit="20"
    :searchable="true"
>

When the page loads, if you do not enter anything into the search box and click 'Show More' it works perfectly - I can show more or less at will. As soon as I enter any text into the search box, however, the 'Show More' button will stop working. Even if I remove all text from the search box, it still will not work.

Make a sandbox with the current behavior

Template: https://codesandbox.io/s/github/algolia/create-instantsearch-app/tree/templates/vue-instantsearch

The sandbox environment does not work for me as I am using the V2 Beta. I have made a short video though - https://imgur.com/a/MBejem8

Full code that is in use to create this:

<ais-refinement-list attribute="my-search-attribute"
    :limit="5"
    :show-more="true"
    :show-more-limit="20"
    :searchable="true"
>
    <template slot-scope="{ items, refine, searchable, isShowingMore, toggleShowMore, searchForItemsQuery, searchForItems, isFromSearch, canToggleShowMore, canRefine, noRefinement }">
        <div class="tw-w-full tw-relative tw-mb-8">
            <input type="text"
                placeholder="Search Style..."
                class="tw-shadow tw-pl-10 tw-pr-4 tw-py-3 tw-w-full tw-outline-none tw-rounded tw-border tw-text-grey-dark tw-text-sm"

                @input="searchForItems($event.target.value)"
            >
            <span class="tw-absolute tw-pin-t tw-pin-l tw-mt-3 tw-ml-4 tw-text-grey">
                <i aria-hidden="true" class="fa fa-search"></i>
            </span>
        </div>
        <ul class="tw-list-reset tw-mt-2">
            <li v-for="item in items" :key="item.value" class="tw-flex tw-items-center tw-mb-4">
                <label class="custom-checkbox">
                    <input type="checkbox" @click="refine(item.value)" />
                    <span></span>
                </label>
                <span class="tw-inline-block tw-mx-2 tw-cursor-pointer" @click="refine(item.value)">
                    @{{ item.label }}
                </span>
                <span class="tw-inline-block tw-text-xs tw-text-grey-dark">(@{{ item.count }})</span>
            </li>
            <li v-if="isFromSearch && items.length === 0">No results.</li>
        </ul>
        <button class="tw-mt-8 tw-flex tw-items-center" v-if="!isShowingMore" @click="toggleShowMore">
            <img src="/images/rightbar-icon-plus.png">
            <span class="tw-inline-block tw-ml-2 tw-text-sm tw-text-black tw-font-bold">Show More</span>
        </button>
        <button class="tw-mt-8 tw-flex tw-items-center" v-if="isShowingMore" @click="toggleShowMore">
            <img src="/images/rightbar-icon-plus.png">
            <span class="tw-inline-block tw-ml-2 tw-text-sm tw-text-black tw-font-bold">Show Less</span>
        </button>
    </template>
</ais-refinement-list>

What is the expected behavior?

I should be able to click 'Show More' and see other results matching the search parameters.

Does this happen only in specific situations?

Only once you enter some text into the search box.

What is the proposed solution?

Clicking 'Show More' will show more results based on text entered into the search box.

What is the version you are using?

2.0.0-beta.1

Always try the latest one before opening an issue.

Haroenv commented 5 years ago

Thanks for the detailed report. Unfortunately this is a bug in InstantSearch.js (underlying library), but luckily it has been fixed in the next major version of that library. Seeing as show more and searchable can't work at the same time, what do you think would be the best solution?

make the show more button disabled if user is currently refining by query
not render the show more slot if the user "isFromSearch"
give the "isFromSearch" variable to the show more slot

Seeing as you're using the main slot, you can already choose not to render or make the button disable based on the isFromSearch variable.

What are your thoughts?

See also original PR and issues in InstantSearch:

jryd commented 5 years ago

Thanks for the update @Haroenv.

Given the two do not work together at all, in any capacity, if you are using both then one shouldn't be visible in my opinion.

I would go for a slightly different solution to those that you proposed:

If the user is using show-more and searchable then I would default to using searchable, not render the show more slot, and trigger a console warning with a short explanation of the bug and a link to this issue or the original algolia/instantsearch.js#3064 issue.

Haroenv commented 1 year ago

This has been released since :)

algolia / vue-instantsearch