Reset search param A when search param B changes - Unexpected behaviour

[pejeio]

Describe the bug

Hi,

I have 2 search parameters:

1. Page: This is used for pagination.
2. Ingredients: This is used for filtering shakes by ingredients.

Imagine a user is on page 2 and then selects an ingredient. At this moment, I want to reset the page to "1" to start from the beginning. In fact, this reset may occur each time the filter is updated.

Here's how I achieve this:

const currentPage = queryParam('page', ssp.number(1))
const selectedIngredients = queryParam('ingredients', ssp.array([]), { showDefaults: false })

selectedIngredients.subscribe((value) => {
  if (!value) {
    return;   
  }
  currentPage.set(1)
})

Unfortunately, the filters stop working with this logic. It becomes impossible to check/uncheck ingredients.

Reproduction

https://codesandbox.io/p/devbox/multiple-filters-srqnmf?file=%2Fsrc%2Flib%2Fcomponents%2FIngredientsFilter.svelte%3A13%2C1-18%2C6

Logs

No response

[JoBurgard]

I don't know why this happens but I found a workaround for your situation.
If you change the page when a checkbox is changed, then it works.
on:input={() => $currentPage = 1}

[pejeio]

The workaround joburgard suggested works. @paoloricciuti I'm curious to understand why the original approach isn't functioning as expected. I was thinking of creating a single store subscriber that monitors all relevant filters. Whenever any filter changes, it would trigger an update to page 1. This approach would ensure a clear separation of concerns within a single function.

[paoloricciuti]

The workaround joburgard suggested works. @paoloricciuti I'm curious to understand why the original approach isn't functioning as expected. I was thinking of creating a single store subscriber that monitors all relevant filters. Whenever any filter changes, it would trigger an update to page 1. This approach would ensure a clear separation of concerns within a single function.

Ok i've looked into it....the problem is quite complex to explain but basically the set you are doing in the subscribe has a reference of page that is still the one with the old parameter. So it will "override" the navigation. This was also a problem before when you had multiple assignments in the same function call and i had to implement a queue mechanism to overcome that. I'll try to look to see if there's a way to fix this but i think it will be difficult.

[TravelingTice]

Having a similar issue when, due to search param state change, it mounts a component that contains an input with bind:value to another search param store. It will reset the original param for me. Hopefully this can be fixed 🙏 A workaround I found is to have an onMount in this newly mounted component, re-instating the original search param, but it's not ideal.

[TravelingTice]

So it will "override" the navigation.

@paoloricciuti I looked into it and have made an attempt at fixing the issue: #73. Let me know if it's any good

[mcdunn51]

I'm experiencing the same problem. This is a useful library but this is quite a major bug. I was stuck on this for an entire day yesterday, before realising that it must be a problem with the library (I'm new to svelte). I imagine that setting a store value within a subscription to another store value is a really common pattern in Svelte, as it is in React.

[paoloricciuti]

I'm experiencing the same problem. This is a useful library but this is quite a major bug. I was stuck on this for an entire day yesterday, before realising that it must be a problem with the library (I'm new to svelte). I imagine that setting a store value within a subscription to another store value is a really common pattern in Svelte, as it is in React.

Tbf it kinda shouldn't..."effects" that set state are generally a bad pattern and if possible it would be better to set both params in the same moment directly in the event.

However i still think this should somehow work... I'm just unable to find a solution for this unfortunately (you can check comments in the pr).