Context: I am using Fable and Elmish in a website that has a login page with two simple inputs: email and password. It works just fine if the button doesn't have the type submit, but by lacking such I cannot press Return in the form to send it, I have to go and click on it, which wouldn't happen if the element were a submit type.
The problem is: how do I properly handle forms with the SAFE stack? If I add the submit type I need an action in the form to some Route (assuming this would be a dispatch Msg in Elmish), however that makes the browser reload the page with the form as query params and end up stuck in login.
Code example:
form [Class !!classes?form (*; Action <- Should I make a dispatch here?*)] [
formControl [ HTMLAttr.Required true ] [
textField [
HTMLAttr.Label "Example"
HTMLAttr.Type "email"
OnInput (fun x -> setExample x.Value) (* Simple hook for managing the state changes *)
MaterialProp.Value example (* Using material UI, but you may disconsider this *)
] []
]
button [
HTMLAttr.Type "submit"
OnClick (fun _ ->
dispatch (Authenticate example) (* <- Here is where I dispatch currently *)
)
] [
str "Enter"
]
]