URL search parameters gets replaced - Remix Run

[coderkk1992]

I'm working on a search UI where I have quite a few filters which I want as URL parameters when someone selects/checks the options. I've used the technique as advised on the Remix.run docs to come up with multiple forms within the filters.

I've posted the question on StackOverflow. can someone help? :D
https://stackoverflow.com/questions/70967822/url-search-parameters-gets-replaced-remix-run

[JClackett]

I've ran into this a few times, basically each form just replaces the url params with it's own search params. To keep both you need to add hidden inputs to each form with all the search params you want to keep:

// In the filters
<input type="hidden" name="search" value={params.get("search")} />

So when you submit this form it will also "keep" the "search" search param, by also submitting it.

[coderkk1992]

Thanks @JClackett! that worked!!! 🥳

But it feels to me like a workaround. Just curious if there's a better way to do this?

[JClackett]

Maybe there's another way, but I'm pretty sure it's meant to work this way. You have two forms on a page, both request data from the server using their own params. Why would they automatically include everything else? What if you didn't want to include the other forms params? You'd have to somehow strip them from the url to submit!

Think this is just the default for html forms :)

[coderkk1992]

Yea you are right. I ended up using formik and set the parameters imperatively. It works pretty well now. 😅

[coderkk1992]

I was hoping theres some exclusive remix magic. damn! i'm so spoilt. lol

[arnaudambro]

@coderkk1992 I have two questions for you, for my curiosity:

1. I can see in your piece of code that you wrap each filter in their own form form : why don't you wrap them all filters in one single form ?
   In the code below, every time an input changes the value of all of them is written in the URL query

const Search = () => {
  const data = useLoaderData();
  const [searchParams] = useSearchParams();

  return (
    <>
      <h2 className="mb-2 w-full">Recherchez un sujet</h2>
      <Form className="flex w-full flex-col gap-3">
        <input type="search" name="search" defaultValue={searchParams.get("search") || ""} />
        <input type="search" name="category" defaultValue={searchParams.get("category") || ""} />
        <button type="submit">Rechercher</button>
      </Form>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </>
  );
};

I've used the technique as advised on the Remix.run docs to come up with multiple forms within the filters

where did you find this technique ?