Reactivesearch: Nuxt.js bug with URLParams

[mauxtin]

Simply using :URLParams="true" has no effect in the URL when selecting a filter or writing something in the DataSearch.

However when typing a filter's URL directly (e.g. .com?colors=["Black"]) the filter recognizes and selects the "Black" value.

When you remove the value from the SelectedFilters component, the value is removed from the listing but not removed from the URL.

(Not sure if this only affects Nuxt.js or Vue.js projects in general.)

[mauxtin]

No, not yet :/ I will probably wait for a fix..

[mauxtin]

FWIW, I experimented a bit with URLParamsProvider.jsx without luck. Maybe @bietkul can give us a hint on what might be the problem so we can try to fix.

My guess is that setUrl doesn't work correctly with nuxt vue-router but I am not sure how to proceed so that it is compatible with both nuxt and vue projects.

[bietkul]

When you remove the value from the SelectedFilters component, the value is removed from the listing but not removed from the URL.

@metagrover I think this is caused by SelectedFilters component where we're calling setValue without passing the URLParams which sets the URLParams as undefined.
https://github.com/appbaseio/reactivesearch/blob/dev/packages/vue/src/components/basic/SelectedFilters.jsx#L57

Because of it the condition fails at URLParamaProvider to reset the URL.
https://github.com/appbaseio/reactivesearch/blob/dev/packages/vue/src/components/URLParamsProvider.jsx#L43

It works in web version, first URLParams gets set to undefined and strangely set to true.
Ideally there should be an another function to patch the component changes instead of setValue which overrides the component data completely.

[metagrover]

I see what you mean. The URLParams property gets set to true whenever there is a change in value (triggered by the setValue call from the component which contains URLParams key as true).

Check the following lines of code which handles the unmount or selectedFilter removal scenario. Are you not covering this use-case in URLParamsProvider - https://github.com/appbaseio/reactivesearch/blob/8be84b851d06b2d93962413376550056f6933e4f/packages/web/src/components/basic/URLParamsProvider.js#L78-L91

[bietkul]

I already have this piece of code https://github.com/appbaseio/reactivesearch/blob/dev/packages/vue/src/components/URLParamsProvider.jsx#L65

But the problem is that when I remove a filter it goes to this line https://github.com/appbaseio/reactivesearch/blob/dev/packages/vue/src/components/URLParamsProvider.jsx#L43 and condition gets fail.

[mauxtin]

Hey @bietkul and thanks for the fix however this doesn't seem to work. It seems like nothing changed. If I click on a multilist item the url doesn't change and if I put the url something like ?colors=["Blue"] the multilist item is selected but if I deselect it the url doesn't change.

Not sure if it's something wrong with my setup but this is what I am using for the multilist.

<multi-list
          :show-filter="true"
          :show-checkbox="true"
          :show-count="false"
          :show-search="false"
          :react="{ and: ['query','price_range','manufacturers', 'CategorySetter'] }"
          :size="100"
          :url-params="true"
          :title="$t('filters.color')"
          :filter-label="$t('filters.color')"
          :inner-class="multiListClasses"
          component-id="colors"
          data-field="specs.color"
          sort-by="asc"
          query-format="or"
        />

[bietkul]

@mauxtin I think somehow you're unable to pass URLParams as true in MultiList component.
Current implementation works well with our Gitxplore example at
https://96jkl96z4.codesandbox.io/?language=%5B%22JavaScript%22%5D&repo=%22the%22

[mauxtin]

@bietkul I think the problem is specifically when using Nuxt.js.. It seems like it works with pure Vue.js projects (Your codesandbox is a Vue.js project instead of Nuxt.js). Do you have a Nuxt.js sandbox that works?

[mauxtin]

Can we reopen this? The problem haven't been fixed.

[metagrover]

@bietkul can you check the use-case with nuxt.js setup and add the example here?

[joergac]

@mauxtin Has this been fixed? Couldn't find a demo with nuxt.js in the docs

[mauxtin]

I only know what you know 😄

The commit above https://github.com/bietkul/reactivesearch/commit/10a935eac2f582d05705c8afc1a80afbf7121660 seems to address this issue but haven't been released yet so I am not sure

[bietkul]

You are Right, this commit has the fix for it but we haven't released the version yet.
We're actively working on a couple of issues to release a stable version as soon as possible.
Thanks

[mauxtin]

Works great @bietkul! Thanks 🎉

One thing I noticed however is that URLParams on DataSearch doesn't work with :debounce="0".
I think when debounce is set to 0 the url params should respect that and not wait for pressing enter to change the url.

Does this make sense?