add preventScrollReset to useSubmit api

[jjenzz]

i've been testing the prerelease (1.10.0-pre.7) and love the new preventScrollReset feature. i was doing this manually before but i was experiencing bugs which this new API fixed 🙏 thank you.

one little niggle though... i am using setSearchParams api on form change so that i can prevent scroll position from changing, which means if i want things to work without JS too i have to duplicate my logic in the client and action code.

export const action = async ({ request }) => {
  const formData = await request.formData();

  if (formData.get('intent') === 'preview') {
    // remove email from shareable url with zod...
    const searchParams = validateSearchParams(formData);
    const url = new URL(request.url);
    if (searchParams.success) {
      return redirect(`${url.pathname}?${new URLSearchParams(searchParams.data)}`);
    }
  }
  // submit logic omitted
}

export default function Page() {
  const loaderData = useLoaderData();
  const [, setSearchParams] = Remix.useSearchParams();

  const registerNativeFormChange = useNativeFormChange((event) => {
    const formData = new FormData(event.currentTarget);
    // remove email from shareable url with zod...
    const searchParams = validateSearchParams(formData);
    if (searchParams.success) {
      setSearchParams(searchParams.data, { replace: true, preventScrollReset: true });
    }
  });

  return (
    <Remix.Form method="post" ref={registerNativeFormChange}>
      <RandomAnimalImage animal={loaderData.pet} />
      <input type="email" name="email" />
      <input  name="pet" />
      <button name="intent" value="preview">preview</button>
      <button name="intent" value="submit">send</button>
    </Remix.Form>
  );
}

const searchParamsSchema = z.object({ pet: z.string() });

function validateSearchParams(formData) {
  const searchParams = Object.fromEntries(formData.entries());
  // remove email from shareable url with zod...
  return searchParamsSchema.safeParse(searchParams);
}

i'd really like to be able to do something like this instead:

export default function Page() {
  const loaderData = useLoaderData();
  const submit = useSubmit();

  const registerNativeFormChange = useNativeFormChange((event) => {
    // submit to existing action from above example (re-use business logic) but don't scroll
    submit(event.currentTarget, { replace: true, preventScrollReset: true });
  });

  return (
    <Remix.Form method="post" ref={registerNativeFormChange}>
      <RandomAnimalImage animal={loaderData.pet} />
      <input type="email" name="email" />
      <input  name="pet" />
      <button name="intent" value="preview">preview</button>
      <button name="intent" value="submit">send</button>
    </Remix.Form>
  );
}

perhaps i have overlooked a more efficient way to architect this though. would love suggestions if so 💛

[seanpascoe]

Thanks, I was searching for this same functionality (I forgot the key name) and it looks like it currently works (1.11.1).

[jjenzz]

ooo that's good to know. i will give latest a try. thanks 🙂

[alex-page]

I can confirm this works with latest version as well.

<Form
  method="get"
  onChange={(e) => submit(e.currentTarget, { preventScrollReset: true })}
>