Right, so long as the event needs to be sent "to the top" (it's an old analogy and maybe outdated since Signals went away) this problem will persist. And I think that this is the case so long as we can only attach effect actions to the DOM - basically it's a flaw not only with FRP, but TEA as well.
This kind of stuff needs to be handled out-of-band. We need a way to create a <lengthRestrictedInput> that doesn't send an action to the rest of the app when the invariants don't hold. Interestingly the behavior that we want to inject into these "input constructors" looks a lot like AFRP. On Jun 19, 2016 6:30 PM, "Alexey Shamrin" <[email protected]> wrote: > Here's how I would implement it in React: > > var App = React.createClass({ > getInitialState: function() { > return {value: ''}; > }, > render: function() { > return <input type="number" onInput={this.handleInput} > value={this.state.value} />; > }, > handleInput: function(e) { > var v = e.target.value; > if (v.length <= 2) { > this.setState({value: v}); > } > } > }); > > > https://jsfiddle.net/axqjjrt2/ > > It works correctly because <input value=…> is a controlled component > <https://facebook.github.io/react/docs/forms.html#controlled-components>: > user input > has no effect on the rendered element, until we set the value with > setState. > > By the way, it is possible to write similar code in Elm: > > import Html exposing (Html, Attribute, text, div, input) > import Html.App exposing (beginnerProgram) > import Html.Attributes exposing (..) > import Html.Events exposing (onInput, on) > import String > import Json.Decode as Json > > main = > beginnerProgram { model = "", view = view, update = update } > > -- UPDATE > > type Msg > = NewContent String > | NoOp > > update msg oldContent = > case msg of > NewContent content -> > content > NoOp -> > oldContent > > -- VIEW > > view content = > input [ type' "number", on "input" decodeInput, value content ] [] > > decodeInput : Json.Decoder Msg > decodeInput = > Json.at ["target", "value"] Json.string > |> Json.map (\s -> if String.length s <= 2 then NewContent s else NoOp) > > Unfortunately, it doesn't help. Annoying flashing of extra digits is still > there. > It seems to me Elm (elm-html?) doesn't support controlled components. > > Is there a discussion about adding controlled inputs to elm-html? > > Alexey > > On Sunday, June 19, 2016 at 6:55:25 PM UTC+3, Max Goldstein wrote: >> >> Is this a problem that React or other vdom-based rendering systems have? >> If so, what's their workaround? If not, why not? >> > -- > 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.
