Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updating search params via a <Link> does not work on the first click if a declarative route mask is used #2070

Open
kevinjprotopie opened this issue Aug 1, 2024 · 0 comments

Comments

@kevinjprotopie
Copy link

kevinjprotopie commented Aug 1, 2024

Describe the bug

When using a <Link> component, I expect that using the search prop would update the search parameters in the URL whenever I click the <Link>.

For example, the code snippet below should increment the page search param in the URL whenever clicked.

<Link search={(prev) => ({ ...prev, page: (prev.page ?? 1) + 1 })}>Click me<Link />

This works great.

However, when I add a route mask to the router, the search parameters no longer update on the first click.

const maskSearchUserId = createRouteMask({
  routeTree,
  search: (prevSearch) => {
    const newSearch = { ...prevSearch };
    delete newSearch.userId;
    return newSearch;
  },
});

// Create a new router instance
const router = createRouter({
  routeTree,
  routeMasks: [maskSearchUserId],
});

For reference, here is the search param setup:

import { Link, createRootRoute } from '@tanstack/react-router';
import z from 'zod';

const searchSchema = z.object({
  userId: z.coerce.string().min(1).optional().catch(undefined),
  page: z.coerce.number().min(1).catch(1),
});

export const Route = createRootRoute({
  validateSearch: searchSchema,
  ...
});

Your Example Website or App

https://stackblitz.com/edit/github-rbjvhp?file=src%2Froutes%2F__root.tsx

Steps to Reproduce the Bug or Issue

  1. Go to the StackBlitz link provided
  2. Open the StackBlitz preview in a new tab via the "Open Preview in new tab" button so you can view the URL as it updates
  3. Click once on the "Click to increment page search param" link and observe the URL does not change.
  4. Click a second time on the "Click to increment page search param" link and observe the URL search params do change from ?page=1 to ?page=2.

Expected behaviour

As a user, I expected the URL search params to update whenever I clicked on a <Link> that updates the search parameters.

Screenshots or Videos

Here's a demo where I click on the <Link> twice, a few seconds apart.

Notice how the URL only updates the second time.

2024-07-31.17-37-27.mp4

Platform

  • OS: macOS
  • Browser: Chrome
  • Version 127.0.6533.89 (Official Build) (arm64)

Additional context

  • Removing the route mask resolves the issue.
  • Supplying a "dummy" route mask (below) that passes the previous value through does not resolve the issue.
search: (prev) => {
    return prev;
},
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant