Proposal.elm

module Proposal exposing (focused) 

{-| Proposed "declarative" API for setting focus. For discussion; does not
address blur. 
-}

import Html exposing (Attribute)
import Html.Attributes

{-| Immediately after subsequent render, focus the element carrying this
attribute. 
-}
focused : Attribute m
focused = 
  Html.Attributes.attribute "data-elm-not-implemented" ""

SampleCurrent.elm

module SampleCurrent exposing (..)

{-| Sample for current focus API. Renders one button and two text fields.
Clicking the button focuses the first textfield. 
-}

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Html.App as App
import Dom
import Task exposing (Task)


-- MODEL


type alias Model = 
  { text1 : String
  , text2 : String
  }


type Msg  
  = Focus
  | Upd1 String
  | Upd2 String
  | NoOp


init : ( Model, Cmd a )
init =
    ( { text1 = "", text2 = "" }, Cmd.none )


-- UPDATE


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
  case msg of
    Focus -> 
      ( model
      , Task.perform (always NoOp) (always NoOp) (Dom.focus "id0")
      )

    NoOp -> 
      ( model, Cmd.none )

    Upd1 str -> 
      ( { model | text1 = str }, Cmd.none )

    Upd2 str -> 
      ( { model | text2 = str }, Cmd.none )


-- VIEW

 
view : Model -> Html Msg
view model =
  div 
    []
    [ button [ onClick Focus ] [ text "Focus" ]
    , input [ id "id0", type' "text", value model.text1, onInput Upd1 ] []
    , input [ type' "text", value model.text2, onInput Upd2 ] []
    ]


-- PROGRAM


main : Program Never
main =
    App.program
        { init = init
        , update = update
        , view = view
        , subscriptions = always Sub.none
        }

SampleProposal.elm

module SampleProposal exposing (..)

{-| Sample for proposed focus API. Renders one button and two text fields.
Clicking the button focuses the first textfield. 
-}


import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Html.App as App
import Proposal exposing (focused)


-- MODEL


type alias Model = 
  { text1 : String
  , text2 : String
  , shouldSetFocus : Bool
  }


type Msg  
  = Focus Bool
  | Upd1 String
  | Upd2 String


init : ( Model, Cmd a )
init =
    ( { text1 = "", text2 = "", shouldSetFocus = False }, Cmd.none )


-- UPDATE


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
  case msg of
    Focus x -> 
      ( { model | shouldSetFocus = x }, Cmd.none )
    
    Upd1 str -> 
      ( { model | text1 = str }, Cmd.none )

    Upd2 str -> 
      ( { model | text2 = str }, Cmd.none )


-- VIEW


view : Model -> Html Msg
view model =
  div 
    []
    [ button [ onClick (Focus True) ] [ text "Focus" ]
    , input 
        ( [ type' "text" , value model.text1, onInput Upd1 ] ++ 
          ( if model.shouldSetFocus then 
              [ focused
              , onBlur (Focus False) 
                {- Key complication: We must make sure we stop forcing the
                focus here once the user moves focus elsewhere. 
                -}
              ]
            else
              []
          )
        )
        []
    , input [ type' "text", value model.text2, onInput Upd2  ] []
    ]


-- APP


main : Program Never
main =
    App.program
        { init = init
        , update = update
        , view = view
        , subscriptions = always Sub.none
        }