Navigation with retainSearchParams middleware not working

[fernion]

Which project does this relate to?

Router

Describe the bug

Navigating when using a retainSearchParams middleware seems to be broken.
The URL for the link shows the search parameter but once we navigate, the search parameter is lost.

Your Example Website or App

https://stackblitz.com/edit/tanstack-router-retain-nok?file=src%2Froutes%2F__root.tsx

Steps to Reproduce the Bug or Issue

Navigate to the about route using the link. The rootValue search parameter is lost.

Expected behavior

rootValue search parameter should be preserved.

This behavior used to work. It was working on this example:
https://stackblitz.com/edit/tanstack-router-retain-ok?file=src%2Froutes%2F__root.tsx

If on the working version we delete the lock file and recreate it, it should stop working.

Screenshots or Videos

No response

Platform

• OS: Linux
• Browser: Chrome
• Version: 130

Additional context

No response

[alex-delia]

This seems to work as intended when using zod for validation

https://stackblitz.com/edit/tanstack-router-retain-nok-mufdebfv?file=src%2Froutes%2F__root.tsx

I'd suggest using this for now and I'll try to see what changed in the retainSearchParams between 1.81.4 and 1.82.2 for your case to no longer work

[alex-delia]

I've tracked this down to commit #2747 by @schiller-manuel but haven't been able to get to the root of why this change affects the code this way

[akrynski-1]

I've encountered the same problem while using valibot to validate search params.

What's interesting is that href property appears to be generated correctly because hovering over a link displays correct value in the browser, same as opening new tab, but actual clicking results in search params being lost.

I've made a quick reproduction using router version 1.106.0 (the most recent at the time of writing):

https://stackblitz.com/edit/tanstack-router-qcw155wa?file=src%2Froutes%2Findex.tsx

Navigating to other page as well as clicking the green button causes search params to be lost.

Search params middleware is such a great feature, it makes previously painful features almost effortlessly easy, but this bug makes it quite useless :/

[jlcontreras]

Having this problem as well, would be great to have that functionality back as it really improves DX!

[LucraMcGonigal]

I also cannot get the search params to stick around anymore with retainSearchParams. Would be great to get it back working 💪

[fernion]

This seems to work as intended when using zod for validation

https://stackblitz.com/edit/tanstack-router-retain-nok-mufdebfv?file=src%2Froutes%2F__root.tsx

I'd suggest using this for now and I'll try to see what changed in the retainSearchParams between 1.81.4 and 1.82.2 for your case to no longer work

Just in case my thumbs up on the comment was not clear enough, and for those who can, using zod as suggested made it work as well for me on my project. We were using zod in other places already, so it seemed a good workaround.

[LucraMcGonigal]

I did try with zod with no luck but maybe I need to give it another go. I will try it out again and report back

[alex-delia]

I'm seeing issues when chaining both retainSearchParams and stripSearchParams, but each seem to work on their own individually

[mmeluch]

This seems to work as intended when using zod for validation

https://stackblitz.com/edit/tanstack-router-retain-nok-mufdebfv?file=src%2Froutes%2F__root.tsx

I'd suggest using this for now and I'll try to see what changed in the retainSearchParams between 1.81.4 and 1.82.2 for your case to no longer work

@alex-delia using zod does indeed help for a while, however, the issue resurfaces as soon as you use a more complex zod schema with any kind of transformation. As per the example mentioned here (I am not using stripSearchParams at all):

const searchSchema = z
  .object({
    rootValue: z.string().optional(),
  })
  // Commenting-out code below makes retainSearchParams work again
  .transform((data) => ({
    ...data,
    rootValue: data.rootvalue ?? data.rootValue
  }));

What is the recommended course of action here? My use case for .transform() is to provide a fallback for malformed search params names.