solidjs / solid-router

A universal router for Solid inspired by Ember and React Router
MIT License
1.14k stars 146 forks source link

action always trigger on form submit #400

Closed SarguelUnda closed 6 months ago

SarguelUnda commented 6 months ago

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

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>
}