Child route setSearchParams scrolls to the top

[tiagoad]

Hi all.

I'm building an app with a bunch of charts in the index route. I've got a search param (range) that selects the time range of these charts (24h, 7d, 30d, etc).
When a user selects another range in the dropdown, my onChange calls the useSearchParams's setSearchParams() function to set this range parameter, which the loader then uses to fetch the correct data and the charts are updated with this data (page looks the same visually, except for the changed data)

This is working well, except the page is scrolling to the top every time the range is changed. My root route.tsx has unstable_shouldReload always returning false, so the data is coming through a fetch for the index route. What am I doing wrong here? How can I keep the page in the same scroll position?

Thanks!

[tiagoad]

This worked for me: #186 (comment)
Is something like this planned for a future remix version?

[sdriffill-tm]

For any recent visitors to this issue the preventScrollReset option seems to work great for the useSearchParams RR hook. E.g. when setting a search param based on selecting an item in a multi select list, this function can be called on item selection:

const [, setSearchParams] = useSearchParams();

const handleItemSelection = (
  _event: React.MouseEvent<HTMLElement>,
  selectedItem: string,
) => {
  setSearchParams(
    (prev) => {
      prev.set('selected', selectedItem);
      return prev;
    },
    { preventScrollReset: true },
  );
};

(I'm using remix v2.1.0)