Elm Gizra/elm-debouncer with text input

Demo

Let us get right to the demo with the code below. Here you can see the text in put, and then after the Debouncer is "settled" it appends it to the message list. Be aware, if you were to naively use the onInput event for the debouncer directly on the element (like I did) you would be rate limiting the input itself and would find yourself unable to type faster than a single character per second.

Elm is cool. This is Gizra/elm-debouncer example modified with a text box delayed for one second. It was not immediately obvious that update could be called recursively. And I had some confusion on how to get a Msg without a Cmd Msg but most posts just said, "you don't want to do it that way".

Snippet

Full code: /elm-debouncer-text/Messages.elm

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        MsgQuietForOneSecond subMsg ->
            Debouncer.update update updateDebouncer subMsg model

        DoThingNow str ->
            update
                (MsgQuietForOneSecond
                    (provideInput DoThingLater)
                )
                { model | draft = str }

        DoThingLater ->
            ( { model
                | messages = model.messages ++ [ model.draft ]
                , draft = ""
              }
            , Cmd.none
            )


view : Model -> Html Msg
view model =
    div [ style "margin" "1em" ]
        [ Html.textarea
            [ Html.Attributes.value model.draft
            , onInput DoThingNow
            ]
            []
        , p [] [ text " I'll add a message below once you stop typing for one second." ]
        , model.messages
            |> List.map (\message -> p [] [ text message ])
            |> div []
        ]

results matching ""

    No results matching ""