Keep inputs focused on query string change

Hey guys. I’m using navigate with replace: true option to keep the state of table filterings.

onChange={(values) => {
  navigate(
    createUrlWithParams(
      routes.orders(),
      {
        ...params,
        clientName: values,
      },
      { arrayFormat: 'comma' }
    ),
    { replace: true }
  )
}}

But whenever the query string changes, my input looses focus, probably due to rerender of the whole thing.
Is there a way to preserve focus on input fields when query string changes?

Just learning for the first time about the replace option. How is replace supposed to maintain the state of table filters? replace: true just makes it so that the top of history stack is replaced by the current navigation instead of adding to the stack. So the next time you call back() it’ll go back to the last page instead of the last search you did. Am I reading that right?

When is the filter applied to the table and how? Is the component calling useParams or something like that to extract the URL query parameters as the value to filter by?

If all you need to do with that navigate call is update the current history stack with the latest search parameters, maybe you can do that more directly somehow instead of using navigate to avoid the re-render? Something like history.replace from What is the purpose of push() and replace() methods of history object??