Progressively enhanced Server Function submission stays pending when bound in a Client Component
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 142k
- Forks
- 32.4k
- Avg merge
- 2d 14h
- Merged PRs (30d)
- 351
Description
Link to the code that reproduces this issue
https://github.com/nikhilsnayak/next-client-bind-repro
To Reproduce
- Clone the linked reproduction.
- Run
bun installfollowed bybun dev. - Disable JavaScript in the browser.
- Navigate to http://localhost:3000.
- Click Update client-bound user.
- The Server Function completes on the server, but the browser navigation remains pending and the returned state is not displayed.
Current vs. Expected behavior
Currently, the form submission remains pending indefinitely, even though the Server Function completes on the server. The state returned by the Server Function is not rendered.
I expect the form submission to complete successfully and the state returned through useActionState to be rendered, just as it is when .bind(...) is called in a Server Component.
Provide environment information
Operating System:
Platform: linux
Arch: x64
Version: #30-Ubuntu SMP PREEMPT_DYNAMIC Fri Jul 31 18:22:54 UTC 2026
Available memory (MB): 15236
Available CPU cores: 8
Binaries:
Node: 24.11.0
npm: 11.6.1
Yarn: 1.22.22
pnpm: 11.24.0
Relevant Packages:
next: 16.4.0-canary.10 // Latest available version is detected (16.4.0-canary.10).
eslint-config-next: N/A
react: 19.2.8
react-dom: 19.2.8
typescript: 5.9.3
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
Server Actions, React
Which stage(s) are affected? (Select all that apply)
next dev (local), next start (local)
Additional context
Binding additional arguments with .bind(...) inside a Client Component is a documented pattern in the official Next.js forms guide:
https://nextjs.org/docs/app/guides/forms#passing-additional-arguments
The reproduction includes a working control where .bind(...) is called in a Server Component. The progressively enhanced submission completes correctly in that case.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by cloning the linked reproduction, then run bun install and bun dev and reproduce the submission with JavaScript disabled. Compare the client-component .bind(...) control with the working Server Component control described in the issue. Done means the progressively enhanced submission no longer stays pending and the state returned through useActionState is rendered.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, nextjs, react
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 68/100