Follow up to my example. Json.Decode is not necessary:
view content =
input [ type' "number", onInput handleInput, value content ] []
handleInput : String -> Msg
handleInput s =
if String.length s <= 2 then NewContent s else NoOp
(annoying flashing is still there)
https://gist.github.com/shamrin/f29672717fc0df775486a7ece0650412
On Monday, June 20, 2016 at 1:30:52 AM UTC+3, Alexey Shamrin 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.
