diff --git a/Main.elm b/Main.elm index 9c0dfcf..79c1c11 100644 --- a/Main.elm +++ b/Main.elm @@ -2,6 +2,9 @@ module Main exposing (main) import Html exposing (..) import Html.Events exposing (onClick, onInput) +import Html.Attributes exposing (id) +import Dom +import Task main = @@ -28,7 +31,7 @@ type alias Model = initialModel : Model initialModel = - { state = Open + { state = Closed , values = fruits , selected = Nothing , query = "" @@ -59,7 +62,7 @@ viewOpen : Model -> Html Msg viewOpen model = div [] [ dropdownHead model.selected CloseSelect - , input [ onInput SearchInput ] [] + , input [ id "search-box", onInput SearchInput ] [] , ul [] (List.map dropdownItem (filteredValues model)) ] @@ -101,13 +104,17 @@ type Msg | CloseSelect | ItemSelected String | SearchInput String + | Noop update : Msg -> Model -> ( Model, Cmd Msg ) update msg model = case msg of + Noop -> + ( model, Cmd.none ) + OpenSelect -> - ( { model | state = Open }, Cmd.none ) + ( { model | state = Open }, focus ) CloseSelect -> ( { model | state = Closed }, Cmd.none ) @@ -119,3 +126,9 @@ update msg model = SearchInput query -> ( { model | query = query }, Cmd.none ) + + +focus : Cmd Msg +focus = + Dom.focus "search-box" + |> Task.attempt (always Noop) diff --git a/elm-package.json b/elm-package.json index f5ba1c5..272bcb2 100644 --- a/elm-package.json +++ b/elm-package.json @@ -9,6 +9,7 @@ "exposed-modules": [], "dependencies": { "elm-lang/core": "5.1.1 <= v < 6.0.0", + "elm-lang/dom": "1.1.1 <= v < 2.0.0", "elm-lang/html": "2.0.0 <= v < 3.0.0" }, "elm-version": "0.18.0 <= v < 0.19.0"