for more information visit the package's GitHub page
Package contains the following modules:
A select widget for elm-ui with keyboard input/scrolling, filtering and requests.
-- MODEL
type alias Model =
{ countrySelect : Select Country }
init : () -> ( Model, Cmd Msg )
init _ =
( { countrySelect =
Select.init "country-select"
|> Select.setItems Countries.all
}
, Cmd.none
)
-- UPDATE
type Msg
= CountrySelectMsg (Select.Msg Country)
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
CountrySelectMsg subMsg ->
Select.update CountrySelectMsg subMsg model.countrySelect
|> Tuple.mapFirst (\select -> { model | countrySelect = select })
-- VIEW
view : Model -> Element Msg
view model =
Select.view
|> Select.toElement []
{ select = model.countrySelect
, onChange = CountrySelectMsg
, itemToString = \c -> c.flag ++ " " ++ c.name
, label = Input.labelAbove [] (text "Choose a country")
, placeholder = Just (Input.placeholder [] (text "Type to search"))
}
Note that if you have the list of items in your model already, you can also pass them directly in the view instead of setting the items in init and it will work just as well:
init : ( PageModel, Cmd Msg )
init =
( { countrySelect = Select.init "country-select" }
, Cmd.none
)
view : List Country -> PageModel -> Element Msg
view countries model =
Select.view
|> Select.toElement []
{ onChange = CountrySelectMsg
, select = Select.setItems countries model.countrySelect
, label = Input.labelAbove [] (text "Choose a country")
, placeholder = Just (Input.placeholder [] (text "Type to search"))
, itemToString = \c -> c.flag ++ " " ++ c.name
}
There are issues when the input is placed within a parent element that has overflow scroll or auto: the menu may be clipped by the parent. This can be overcome by using Select.withMenuPositionFixed, but if the parent also has a transform applied, it gets clipped again. This means any parent with e.g. Element.scrollBarY + Element.moveDown/moveLeft etc. can cause issues. This is due to a feature of the current CSS spec.