How to manually construct a select menu in Style Elements.

Input.Select.elm

module SelectMenu exposing (..)


import Element exposing (..)
import Element.Input as Input
import Element.Font as Font
import Dom
import Color exposing (..)


main =
    Html.program
        { init = ( init, Cmd.none )
        , view = view
        , update = update
        , subscriptions = \_ -> Sub.none
        }


init =
    { menuFocused = False
    , lunch = Gyro
   
    }



type Msg
    = Focus String
    | LoseFocus String
    | UpdateFocus Bool
    | UpdateLunch Lunch
    | NoOp


update msg model =
    case msg of
        NoOp ->
            ( model, Cmd.none )

        UpdateFocus focused ->
            ( { model | menuFocused = focused }, Cmd.none )
           
        Focus id ->
            ( { model | menuFocused = True }
            , Task.attempt (always NoOp) (Dom.focus id)
            )

        LoseFocus id ->
            ( { model | menuFocused = False }
            , Task.attempt (always NoOp) (Dom.blur id)
            )
           
        UpdateLunch lunch ->
            ( { model | lunch = lunch }
            , Cmd.none
            )


type Lunch
    = Burrito
    | Taco
    | Gyro


view model =
    el
        [ Events.onClick
            (if not model.menuFocused then
                Focus "my-select-menu"
                else
                LoseFocus "my-select-menu"
            )
        , below <|
            Input.radio
                [ width fill
                , htmlAttribute (Html.Attributes.id "my-select-menu")
                , Events.onFocus (UpdateFocus True })
                , Events.onLoseFocus (UpdateFocus False })
                , Background.color white
                , Border.color grey
                , Border.width 1
                , padding 15
                , spacing 15
                , pointer
                , transparent True
                , focused
                    [ transparent False
                    ]
                ]
                { selected = Just model.lunch
                , onChange = Just UpdateLunch
                , label =
                    Input.labelAbove
                        [ transparent True
                        ]
                        (text "What would you like for lunch?")
                , options =
                    [ Input.option Gyro (text "Gyro")
                    , Input.option Burrito (text "Burrito")
                    , Input.option Taco (text "Taco")
                    ]
                }
        ]
        <|
        el
            [ alignLeft
            , Font.bold
            , pointer
            ]
        <|
            case model.lunch of
                Gyro ->
                    text "What would you like for lunch? - Gyro"

                Burrito ->
                    text "What would you like for lunch? - Burrito"

                Taco ->
                    text "What would you like for lunch? -Taco"