Add submitPreventDefault to Formless when using forms #80
Conversation
| HH.form | ||
| [ HE.onSubmit F.submitPreventDefault | ||
| ] |
There was a problem hiding this comment.
Use submitPreventDefault in the readme example to avoid confusion
There was a problem hiding this comment.
I can do this in a follow up PR if you'd like, but we really should switch all forms to be written this way
There was a problem hiding this comment.
I was thinking to do that follow up PR, if that's not a problem
example/readme/Component.purs
Outdated
| In formless, if you use a default form you would notice a page refresh when submitting the form. | ||
| In the other examples, this is avoided by not using a form element. In this example, we use | ||
| a special function F.submitPreventDefault to avoid the page refresh. | ||
|
|
||
| You can download the examples and replace F.submitPreventDefault with | ||
| \_ -> F.submit to see the difference. |
There was a problem hiding this comment.
The text explaining how submitPreventDefault changes the behavior of them form and how to modify the example is probably worth reviewing as well.
There was a problem hiding this comment.
I think this can be removed, probably, as you really ought to just use forms this way in general. I think it'd be better to add documentation to submit that says it can be used to submit the form imperatively, but that if you want to capture the form submission event and submit your form that you should use submitPreventDefault
There was a problem hiding this comment.
We introduced submitPreventDefault to avoid the breaking change. Maybe it could be changed to work the other way around in a future major release?
There was a problem hiding this comment.
Yea, I’d rather have ‘submit’ and ‘submit_’ using the usual Halogen naming conventions in the future!
There was a problem hiding this comment.
Thanks, @chiroptical! This is looking good, just have a few comments.
Co-authored-by: Thomas Honeyman <admin@thomashoneyman.com>
What does this pull request do?
Closes #79. In the examples, this is handled by not using form but many people will reach for what they are familiar with. It is quite confusing when you run into this especially as a beginner to frontend development. Therefore we suggest the addition of
F.submitPreventDefaultand make the appropriate changes to the readme to avoid this confusion altogether. Additionally, we add the example code in the readme to the examples directory.Where should the reviewer start?
I added some comments on where to start your review 😄
How should this be manually tested?
You can bundle the examples with
spago -x example/example.dhall bundle-app --to ./dist/app.jsto launch the "readme" example and see the behavior. You can also modify theonSubmit \_ -> F.submitto see that the page refreshes.Other Notes:
It might be useful to modify the existing examples to now use form elements and the
F.submitPreventDefaultfunction.