Broken prevent default ?

[Raveline]

Hello,

I was trying to send data extract from a form, using an ajax POST request. I noticed that after my plugged (on onSubmit) event gets consumed, the default form submit goes on, reloading the page (following the scenario described in https://www.w3.org/TR/html401/interact/forms.html#h-17.13.3).

I thought this might be an issue with my code, so I went and run the form example provided by pux repo, but I observe the same behaviour (so you can reproduce the issue easily) : form submission will reload the page.

I suspect, based on this comment :

https://github.com/alexmingoia/purescript-pux/issues/37#issuecomment-218662255

that using #! should always prevent default behaviour.

I'm using purescript 0.11.4.

Here are my questions :

• Am I wrong to assume that this is not the expected behaviour ?

• If I am, what is the way to make sure submitting a form will not propagate ?

• If I'm not, what's broken exactly ?

Thank you very much for your help !

[sabine]

If any use of #! would always prevent default behavior, this would be a problem, wouldn't it? This would mean preventing typing and moving the cursor in input fields, as well as many other things that you'd probably not expect to be prevented just by attaching an event handler.

It looks to me like in v5.0.0 Pux did indeed automatically call preventDefault for the onSubmit event (https://github.com/alexmingoia/purescript-pux/blob/v5.0.0/src/Pux/Html/Events.js#L8). However, since then, the code has changed substantially and there seems to be no hidden magic regarding preventing defaults anymore in Pux (a search in the repository for "preventDefault" brings up nothing that would suggest otherwise).

It looks to me like the way to go is to call preventDefault on the event in your foldp/update function that handles form submission (like in the routing example here: https://github.com/alexmingoia/purescript-pux/blob/b53cdd4bbbd8260cdd315af1f5667494c7046374/examples/routing/App.purs#L38).

[Raveline]

Hello and thank you for your answer (and your example on how to implement a manual prevent default if need be). Of course, what you're saying on the issues with automatically preventing default behaviour absolutely makes sense.

I thought, however, that when using #! (const MyEvent) (as in https://github.com/alexmingoia/purescript-pux/blob/master/examples/form/Forms.purs#L31), discarding the DOMEvent through const meant automatically preventing the default behaviour.

If not so, I wonder if the Form example shouldn't be updated then to take this into account, for I suspect its current behaviour is not the expected one.

[sabine]

Ah I understand now what you mean: Preventing default in case const is used. That's an interesting thought.

I'm not sure whether a framework should do that. It's clear that in case of not using const, the default behavior should not generally be prevented. For a framework, erring on the side of having too little "magic" in terms of preventDefault seems less invasive to me than erring on the side of implicitly doing too much.

I agree with you that it would be reasonable to update the form example in any case. It, currently, indeed seems broken because the SignIn event doesn't do anything. In case the developer wants to use regular HTML form submit, it seems unnecessary to add a SignIn event, while in case of AJAX form submit, preventing the default behavior is necessary to avoid double-posting+page-reload. Adding a preventDefault and a comment that this is the place where you would do a HTTP post request in the SignIn event case could make things clearer.

[alexmingoia]

I've updated the form example.