T
TanStack•7mo ago
vicious-gold

resetScroll={false} only works on first click

I am super confused here. The first click on one of these tabs works correctly (page doesnt scroll to the top), but all subsequent clicks scroll to the top. Am I doing something wrong? The same was happening when I tested with Link components outside of this Tabs component as well, so I think I've isolated it to not be an issue with this component 
export function ProductTypeNav({ projectId }: { projectId: number }) {
  const productTypes = ProductTypeSchema.options;
  const currentProductType = useSearch({
    from: "/p/$projectId/settings/products",
    select: (search) => search.productType,
  });

  const navigate = useNavigate();
  return (
    <>
      {/* Desktop */}
      <Tabs
        value={currentProductType ?? undefined}
        className="hidden lg:block"
        onValueChange={(value) => {
          navigate({
            to: "/p/$projectId/settings/products",
            resetScroll: false,
            search: {
              productType: value as ProductType,
            },
            params: {
              projectId,
            },
          });
        }}
      >
        <TabsList className="flex gap-2">
          {productTypes.map((pt) => (
            <TabsTrigger value={pt} key={pt}>
              {pt}
            </TabsTrigger>
          ))}
        </TabsList>
      </Tabs>
)
}
export function ProductTypeNav({ projectId }: { projectId: number }) {
  const productTypes = ProductTypeSchema.options;
  const currentProductType = useSearch({
    from: "/p/$projectId/settings/products",
    select: (search) => search.productType,
  });

  const navigate = useNavigate();
  return (
    <>
      {/* Desktop */}
      <Tabs
        value={currentProductType ?? undefined}
        className="hidden lg:block"
        onValueChange={(value) => {
          navigate({
            to: "/p/$projectId/settings/products",
            resetScroll: false,
            search: {
              productType: value as ProductType,
            },
            params: {
              projectId,
            },
          });
        }}
      >
        <TabsList className="flex gap-2">
          {productTypes.map((pt) => (
            <TabsTrigger value={pt} key={pt}>
              {pt}
            </TabsTrigger>
          ))}
        </TabsList>
      </Tabs>
)
}
5 Replies
vicious-gold
vicious-goldOP•7mo ago
In other words, even this doesn't work (only on first click): 
      <div className="flex flex-col gap-2">
        {ProductTypeSchema.options.map((productType) => (
          <Link
            key={productType}
            resetScroll={false}
            to="/p/$projectId/settings/products"
            search={{ productType }}
            params={{ projectId }}
          >
            {productType}
          </Link>
        ))}
      </div>
      <div className="flex flex-col gap-2">
        {ProductTypeSchema.options.map((productType) => (
          <Link
            key={productType}
            resetScroll={false}
            to="/p/$projectId/settings/products"
            search={{ productType }}
            params={{ projectId }}
          >
            {productType}
          </Link>
        ))}
      </div>
some more details ive noticed. it only ever appears to work "the first time" when its after a fresh browser reload while on that page. if i navigate from another page to this page, it doesnt "work the first time" either
vicious-gold
vicious-goldOP•7mo ago
https://github.com/TanStack/router/issues/3408
GitHub
resetScroll={false} does not work · Issue #3408 · TanStack/router
Which project does this relate to? Router Describe the bug The linked reproduction example isn't the use case I have (mine is "changing search params on the same page" without resetti...
harsh-harlequin
harsh-harlequin•7mo ago
4. Go back to home page, scroll down again
"go back" as in "click the browser's back button" ?
vicious-gold
vicious-goldOP•7mo ago
no, sorry. clicking the home page again i'll clarify in that issue i think in my testing, the back button actually did work as intended
eastern-cyan
eastern-cyan•7mo ago
I'm also running into this issue when updated search params on a button click for the same page

Did you find this page helpful?