Bug: Setting values via setQueryParams causes page to jump

[nickytonline]

It's great to store state in the query string instead of component state in a lot of cases, however, our current setQueryParams helper function for this causes the page to jump.

Next.js' router allows you to prevent scrolling, i.e. update the page and scroll back to the top. We should update our helper function to default to false for scrolling.

function setQueryParams(
  params: Record<string, string>,
  paramsToRemove: Array<string> = [],
-  pathname?: string
+  pathname?: string,
+  scroll = false
) {
  const presentQueryParams = deleteKeys(Router.query, paramsToRemove);

  // Merge final query and set URL
  Router.push(
    {
      pathname: pathname || Router.pathname,
      query: {
        ...presentQueryParams,
        ...params,
      },
    },
+   undefined,
+   { scroll }
  );
}

[github-actions]

Thanks for the issue, our team will look into it as soon as possible! If you would like to work on this issue, please wait for us to decide if it's ready. The issue will be ready to work on once we remove the "needs triage" label.

To claim an issue that does not have the "needs triage" label, please leave a comment that says ".take". If you have any questions, please comment on this issue.

For full info on how to contribute, please check out our contributors guide.

[open-sauced]

🎉 This issue has been resolved in version 2.50.0-beta.5 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[open-sauced]

🎉 This issue has been resolved in version 2.50.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀