react-component / react-component/field-form

<Form/> cannot submitted via ‘action’ property

Open
#596 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
1k
Forks
286
Avg merge
4d 16h
Merged PRs (30d)
1

Description

I'm currently experimenting with a login form implemented using rc-field-form at its core that interacts with an OAuth2/OIDC implementation that expects a traditional server side rendered app for the login form. For this reason, I want to not attach an onFinish() callback to the form, but instead submit it via the native <form> submit mechanism, by setting the action property on the form, like so:

<Form name="test-form" action="https://httpstat.us/200" method="post">
  <Field name="test-field">
    <input placeholder="test field" value={""}/>
  </Field>
  <button type="submit" value={"submit"}>
    Submit
  </button>
</Form>

Since FormProps transitively extends React.FormHTMLAttributes I was expecting this to work, but of course it doesn't because here the event propagation of the submit click is stopped in favour of delegating processing to the form instance. I think rc-field-form's behaviour would be less surprising if event propagation were only stopped if:

  • Form validation fails
  • An on finish callback is actually attached to the form.

Of course, the alternative would be to omit action (and probably method) from FormProps, though that hardly seems satisfactory to me.

A demonstrator reproducing the bug can be found here: https://github.com/ngrewe/rc-field-form-bug

Thanks,

Niels

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in src/Form.tsx at the submit event handling around lines 164–165, then run the linked demonstrator repository to reproduce the failed native submission. The fix should allow a form with action and method to submit through the native mechanism while preserving validation behavior and onFinish handling.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.