Add a helper function to submit a form and call preventDefault on the event

[pmiddend]

I'm pretty happy with formless so far! One thing is really strange and is bugging me though: I'm submitting my form using F.submit, which validates and then submits. However, my cypress tests fail, because cypress actually sees the form submit and the new URL that's being broadcast and navigates to that new URL, see here:

This prevents my tests from passing, since a whole new page is loaded. Judging from this YouTube video from the cypress authors, to prevent this behavior, I'd have to call event.preventDefault() and then make my XHR request.

Is there a way to do this (easily?) in formless?

[thomashoneyman]

I was actually speaking with @chiroptical and @gillchristian about this recently! You do need to capture the event and call preventDefault on it when your form is submitted.

Here's a tiny example of how that's done (though this example doesn't use Formless). First, the submission event is captured:

https://github.com/thomashoneyman/purescript-halogen-store/blob/0831cc671c61a93afec9782a731150e5a6b4e905/example/redux-todo/ReduxTodo/Component/AddTodo.purs#L42

Then, we call preventDefault on it:

https://github.com/thomashoneyman/purescript-halogen-store/blob/0831cc671c61a93afec9782a731150e5a6b4e905/example/redux-todo/ReduxTodo/Component/AddTodo.purs#L55-L56

This prevents the browser from sending the POST request and reloading the page, which is its default behavior. In Formless, you'll want to do the same thing: write your own HandleSubmit action that takes in the event and is provided to the form element. Then, you'll want to handle it like this:

handleAction = case _ of
  HandleSubmit event -> do
    H.liftEffect $ preventDefault event
    F.handleAction handleAction handleEvent F.submit

This is really tedious to do all the time, so I've explored adding a new helper function that calls preventDefault for you that would be called something like submitPrevent or something like that.

[chiroptical]

@gillchristian and I are planning on working on this soon :)

[pmiddend]

@thomashoneyman Thanks for the intricate answer! I tried adapting my code this way, by defining a new action type:

data FormAction = HandleSubmit Event

then adding the onSubmit (albeit with injAction):

HH.form [ HE.onSubmit (\e -> F.injAction (HandleSubmit e)) ] ...

and writing my handleAction handler:

  myHandleAction (HandleSubmit event) = do
    H.liftEffect $ preventDefault event
    F.handleAction myHandleAction F.raiseResult F.submit

However, now my action is executed twice. I think I might have something wrong with the recursive myHandleAction call, or possibly with the F.raiseResult (which is my handleEvent for the component as well)?

Edit: Ah damn. I needed to remove my onClick -> F.submit handler. Okay, now it's working, thanks! Shall I keep this issue open?

[thomashoneyman]

I've renamed this to track adding a helper function, and we can keep it open for that purpose. @gillchristian and @chiroptical please feel free to link this issue when you get to that implementation!