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

action always trigger on form submit #400

Closed
SarguelUnda opened this issue Apr 10, 2024 · 0 comments · Fixed by #401
Closed

action always trigger on form submit #400

SarguelUnda opened this issue Apr 10, 2024 · 0 comments · Fixed by #401

Comments

@SarguelUnda
Copy link
Contributor

SarguelUnda commented Apr 10, 2024

Describe the bug

Hello, it seems that the action always resolve on form submit even when prevent default is used.

Your Example Website or App

https://github.com/SarguelUnda/solidrouter-action-issue

Steps to Reproduce the Bug or Issue

  1. clone the repository
  2. run npm run dev
  3. browse to http://127.0.0.1:3000/
  4. click on the first button, nothing happen as the submit event stopped the form action to submit the form to another url
  5. click on the second one, the function myAction run, logging in the console and mutating data

Expected behavior

As a user, I expect the action to only resolve if the the submit event goes through

Screenshots or Videos

No response

Platform

  • OS: Docker node:21 image
  • Browser: Firefox
  • Version: 0.13.1

Additional context

relevant part of the code:

const [count, setCount] = createSignal(0)

const myAction = action(async (data: FormData) => {
  setCount(c => c + 1)
  console.log("ACTION")
});

const mySubmit = (e: SubmitEvent) => {
  console.log("onSubmit")
  e.preventDefault()
}

const MyForm = () => <>
  <form action="https://www.solidjs.com/" onSubmit={mySubmit} method="post">
    <button type="submit">Click Me</button>
  </form>
  <form action={myAction} onSubmit={mySubmit} method="post">
    <button type="submit">Click Me</button>
  </form>
  I should always stay at 0 : {count()}
  </>

const App = () => {
  return <Router>
    <Route path="*" component={MyForm} />
  </Router>
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant