Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[NEXT-1228] Adding hidden form input at start of form overrides ACTION_ID when using server action #50087

Closed
1 task done
mgm1313 opened this issue May 20, 2023 · 1 comment · Fixed by #50978
Closed
1 task done
Assignees
Labels
area: app App directory (appDir: true) bug Issue was opened via the bug report template. linear: next Confirmed issue that is tracked by the Next.js team.

Comments

@mgm1313
Copy link

mgm1313 commented May 20, 2023

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #22 SMP Tue Jan 10 18:39:00 UTC 2023
    Binaries:
      Node: 16.17.0
      npm: 8.15.0
      Yarn: 1.22.19
      pnpm: 7.1.0
    Relevant packages:
      next: 13.4.4-canary.0
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 4.9.5

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue or a replay of the bug

https://codesandbox.io/p/sandbox/gracious-http-zqknr4

To Reproduce

Create a form with a server action. Add a hidden input as the direct child of the form.

Describe the Bug

When adding a hidden form input at the start of a form, it appears twice in the DOM and the posted data to the server action. With it, the automatically inserted hidden $ACTION_ID seems to get overwritten.
When moving the input to the bottom of the form, all is working fine.

<form action="" enctype="multipart/form-data" method="POST">
  <input type="hidden" name="pathname" value="/">
  <input type="hidden" name="pathname" value="/">
  <input type="text" name="Enter your name">
  <button type="submit">Submit</button>
</form>

Expected Behavior

<form action="" enctype="multipart/form-data" method="POST">
  <input type="hidden" name="$ACTION_ID_f9fae9b99644f9d4fb5dcdfdb8fb0e06af189eef">
  <input type="hidden" name="pathname" value="/">
  <input type="text" name="Enter your name">
  <button type="submit">Submit</button>
</form>

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

NEXT-1228

@mgm1313 mgm1313 added the bug Issue was opened via the bug report template. label May 20, 2023
@github-actions github-actions bot added the area: app App directory (appDir: true) label May 20, 2023
@shuding shuding added the linear: next Confirmed issue that is tracked by the Next.js team. label May 23, 2023
@shuding shuding changed the title Adding hidden form input at start of form overrides ACTION_ID when using server action [NEXT-1228] Adding hidden form input at start of form overrides ACTION_ID when using server action May 23, 2023
sebmarkbage added a commit to facebook/react that referenced this issue May 26, 2023
…tion fields (#26846)

This solves an issue where if you inject a hidden field in the beginning
of the form, we might mistakenly hydrate the injected one that was part
of an action.

I'm not too happy about how specific this becomes. It's similar to Float
but in general we don't do this deep comparison.

See vercel/next.js#50087
@shuding shuding self-assigned this Jun 8, 2023
shuding added a commit that referenced this issue Jun 8, 2023
…orm (#50978)

Fixes #50087. The root cause was fixed in upstream React and here's a
test to ensure it works end to end.
fix NEXT-1228
@github-actions
Copy link
Contributor

github-actions bot commented Jul 9, 2023

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jul 9, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area: app App directory (appDir: true) bug Issue was opened via the bug report template. linear: next Confirmed issue that is tracked by the Next.js team.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants