Right the problem is that the input isn't sending a keypressed event that we can filter, but is internally updating it's state (opaque to Elm) and sending the new value.
Dan, I think that, architecturally, your solution is a step in the right direction. The validation needs to happen synchronously, internal to the element. It would be nice to have a first-class way to inject this behavior into the html element. A few ideas: 1) Some sort of annotation to pass a reference to the post-compilation JS identifier as an event attribute. 2) Compile down to a HTML custom element where the validation is internal. On Saturday, June 18, 2016 at 6:26:24 PM UTC-4, Dan P wrote: > However when I write this in Elm using onInput, the user's invalid input > is visible for a few milliseconds before being fixed. To me this seems like > a vDOM issue, but I really don't know. > I think this is closely related to this longstanding issue: https://github.com/evancz/elm-html/issues/51 The problem is that Elm processes events like "input" asynchronously. After the browser fires the input event, some time is allowed to pass before the Elm runtime calls your update and view functions, and then some more time is allowed to pass before your new view is actually rendered to the DOM. Meanwhile, the browser has synchronously changed what is displayed in the input, so if you can't synchronously "undo" that change, the illegal input will be displayed briefly to the user. I'm not aware of any way to work around this issue within Elm, so long as it continues to processes events like "input" asynchronously. BTW, if anyone else wants to see this issue for themselves, here's a fully working example you can paste into http://elm-lang.org/try import Html exposing (Html, Attribute, text, div, input) import Html.App exposing (beginnerProgram) import Html.Attributes exposing (..) import Html.Events exposing (onInput) import String main = beginnerProgram { model = "", view = view, update = update } -- UPDATE type Msg = NewContent String update (NewContent content) oldContent = if (String.length content > 2) then oldContent else content -- VIEW view content = input [ type' "number", onInput NewContent, value content ] [] -- You received this message because you are subscribed to the Google Groups "Elm Discuss" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. For more options, visit https://groups.google.com/d/optout. -- You received this message because you are subscribed to the Google Groups "Elm Discuss" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. For more options, visit https://groups.google.com/d/optout.
