[Bug]: useSubmitImpl() not respects incoming query search when using POST

[jacargentina]

My first contribution. This tests shows the bug explained on #927

[remix-cla-bot]

Hi @jacargentina,

Welcome, and thank you for contributing to Remix!

Before we consider your pull request, we ask that you sign our Contributor License Agreement (CLA). We require this only once.

You may review the CLA and sign it by adding your name to contributors.yml.

Once the CLA is signed, the CLA Signed label will be added to the pull request.

If you have already signed the CLA and received this response in error, or if you have any questions, please contact us at hello@remix.run.

Thanks!

- The Remix team

[remix-cla-bot]

Thank you for signing the Contributor License Agreement. Let's get this merged! 🥳

[remix-cla-bot]

Thank you for signing the Contributor License Agreement. Let's get this merged! 🥳

[ryanflorence]

Ah, the real problem here is that useFormAction() doesn't preserve the search params.

Your current solution is just always grabbing the current URL's search params, which is not what we want, it's the form that determines the action we're posting to, not the current page.

The mixup is that <Form> and <Form action="."> default to the current URL, and the bug is that it's not preserving the search params.

If you do <Form> or <Form action="."> at "/some/url?q=1" then the resulting HTML should be <form action="/some/url?q=1">.

That logic is in useFormAction. Want to take a stab at getting it fixed there?

[ryanflorence]

Actually this seems to go deep. @chaance can you look into this? I think this is busted all the way back into React Router, useResolvedPath isn't preserving the search param

https://github.com/remix-run/react-router/blob/7aa62850ec86ddaf70b9ac7ec81dc76ce1254cf4/packages/react-router/index.tsx#L608-L620

[chaance]

The behavior in React Router is as intended. I'll take a look at this tomorrow morning and make sure we get it fixed.

[jacargentina]

@ryanflorence Ok.
@chaance May be I can refactor my PR to be only the test, and leave the fix at your charge? Here to help.

[chaance]

@jacargentina That would actually be quite helpful, thanks! I'll be adding a few more tests as well.

[jacargentina]

@chaance i want to migrate my NextJS site to Remix, please. I depend on this.

[nrako]

I made this little contraption to work around that problem for the time being:

import { useFormAction, useSearchParams } from '@remix-run/react'

/**
 * Hook to work around https://github.com/remix-run/remix/pull/931
 */
export default function useFormActionWithSearchParams(to: string = '.') {
  const actionUrl = new URL(useFormAction(to), 'http://localhost')
  const [actionSearch] = useSearchParams()

  const combinedSearch = new URLSearchParams({
    ...Object.fromEntries(actionUrl.searchParams),
    ...Object.fromEntries(actionSearch),
  })

  return actionUrl.pathname + '?' + combinedSearch.toString()
}

<Form action={useFormActionWithSearchParams()} >

[mcansh]

🤖 Hello there,

We just published version v1.6.8 which includes a fix for this. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!