A demonstration of how text fields need identity continuity

InputDemo.elm

import Html exposing (div, input, text, fieldset, label)
import Html.App exposing (beginnerProgram)
import Html.Events exposing (onInput, onClick)
import Html.Attributes exposing (value, type', style, name)


type alias Model =
    { text : String
    , items : List String
    , position : BeforeAfter
    }


type BeforeAfter
    = Before
    | After


init =
    { text = ""
    , items = []
    , position = Before
    }


type Msg
    = NewText String
    | SetPosition BeforeAfter


update : Msg -> Model -> Model
update msg model =
    case msg of
        NewText string ->
            { model | text = string, items = string :: model.items }

        SetPosition position ->
            { model | position = position }


view : Model -> Html.Html Msg
view model =
    let
        buttons =
            fieldset []
                [ radio "Before" "position" (SetPosition Before)
                , radio "After" "position" (SetPosition After)
                ]

        items =
            List.map (\str -> div [] [ text str ]) model.items

        textField =
            input [ value model.text, onInput NewText ] []

        ordered =
            case model.position of
                Before ->
                    textField :: items

                After ->
                    List.reverse (textField :: items)
    in
        div []
            [ buttons
            , div [] ordered
            ]


radio : String -> String -> msg -> Html.Html msg
radio value groupName msg =
    label
        [ style [ ( "padding", "20px" ) ] ]
        [ input [ type' "radio", name groupName, onClick msg ] []
        , text value
        ]


main =
    beginnerProgram { model = init, view = view, update = update }