[NEXT-1228] Adding hidden form input at start of form overrides ACTION_ID when using server action #50087
Description
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.5Which 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