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: https://github.com/paoloricciuti/sveltekit-search-params/pull/73. Let me know if it's any good