Opaque type that holds the current state

type alias Model =
    { dropdownState : Dropdown.State
    }

Create a new state. You must pass a unique identifier for each dropdown component.

{
    ...
    dropdownState = Dropdown.init "country-dropdown"
}

Opaque type for the internal dropdown messages

Opaque type that holds the current config

dropdownConfig =
    Dropdown.basic
        { allItems = always [ "apples", "bananas", "oranges" ]
        , selectedItem = .selectedFruit
        , dropdownMsg = DropdownMsg
        , onSelectMsg = FruitPicked
        , itemToPrompt = Element.text
        , itemToElement = \selected -> \highlighted -> Element.text
        }

Create a basic configuration. This takes:

- itemsFromModel - The list of items to display in the dropdown (as a function of the model)
- selectionFromModel - The function to get the selected item from the model
- dropdownMsg - The message to wrap all the internal messages of the dropdown
- onSelectMsg - A message to trigger when an item is selected
- itemToPrompt - A function to get the Element to display from an item, to be used in the select part of the dropdown
- itemToElement - A function that takes a bool for whether the item is selected followed by a bool for whether the item is highlighted, followed by the item and returns the Element to display, to be used in the list part of the dropdown

Create a filterable configuration. This takes:

- itemsFromModel - The list of items to display in the dropdown (as a function of the model)
- selectionFromModel - The function to get the selected item from the model
- dropdownMsg - The message to wrap all the internal messages of the dropdown
- onSelectMsg - A message to trigger when an item is selected
- itemToPrompt - A function to get the Element to display from an item, to be used in the select part of the dropdown
- itemToElement - A function that takes a bool for whether the item is selected followed by a bool for whether the item is highlighted, followed by the item and returns the Element to display, to be used in the list part of the dropdown
- itemToText - A function to get the text representation from an item, to be used when filtering elements in the list

Create a multiselect configuration. This takes:

- itemsFromModel - The list of items to display in the dropdown (as a function of the model)
- selectionFromModel - The function to get the selected items from the model
- dropdownMsg - The message to wrap all the internal messages of the dropdown
- onSelectMsg - A message to trigger when an item is selected
- itemsToPrompt - A function to get the Element to display from the list of selected items, to be used in the select part of the dropdown
- itemToElement - A function that takes a bool for whether the item is selected followed by a bool for whether the item is highlighted, followed by the item and returns the Element to display, to be used in the list part of the dropdown

Create a configuration which can be used as an autocomplete. It emits a message on every filter change which can be handled in parent application to fetch predictions. This takes:

- itemsFromModel - The list of items to display in the dropdown (as a function of the model)
- selectionFromModel - The function to get the selected item from the model
- dropdownMsg - The message to wrap all the internal messages of the dropdown
- onSelectMsg - A message to trigger when an item is selected
- onFilterChangeMsg - A message emitted when text in the search input changes, this message can be used to fetch predictions from a remote server to be rendered in the dropdown
- itemToPrompt - A function to get the Element to display from an item, to be used in the select part of the dropdown
- itemToElement - A function that takes a bool for whether the item is selected followed by a bool for whether the item is highlighted, followed by the item and returns the Element to display, to be used in the list part of the dropdown
- itemToText - A function to get the text representation from an item, to be used when filtering elements in the list

Sets the container visual attributes, default is empty

Dropdown.withContainerAttributes [ width (px 300) ] config

Sets the content of the Select, default is "-- Select --"

Dropdown.withPromptElement (el [ Font.color (rgb255 123 123 123) ] <| text "Pick one") config

Sets the placeholder of the Filterable dropdown, default is "Filter values"

Dropdown.withFilterPlaceholder "Type here..." config

Sets the select visual attributes, default is empty

Dropdown.withSelectAttributes [ Border.width 1, Border.rounded 5, paddingXY 16 8 ] config

Sets the search visual attributes, default is empty

Dropdown.withSearchAttributes [ Border.width 0, padding 0 ] config

Sets the open and close buttons' visual attributes, default is empty

Dropdown.withOpenCloseButtons { openButton = text "+", closeButton = "-" } config

Sets the item list visual attributes, default is empty

Dropdown.withListAttributes [ Border.width 1, Border.rounded ] config

Update the component state

DropdownMsg subMsg ->
    let
        ( updated, cmd ) =
            Dropdown.update dropdownConfig subMsg model model.dropdownState model.items
    in
        ( { model | dropdownState = updated }, cmd )

Render the view

Dropdown.view dropdownConfig model model.dropdownState model.items

Serves as a subscription to know when the user has clicked outside a certain dropdown

- dropdownState: State of the dropdown we want to subscribe to
- dropdownMsg: The message to wrap all the internal messages of the dropdown


subscriptions : Model -> Sub Msg
subscriptions model =
    Dropdown.onOutsideClick model.dropdownState DropdownMsg

Allows tests with elm-program-test

Resolves Effect as Elm's Cmds. If you plan to implement this yourself, it looks like this:

performEffect : Effect msg -> Cmd msg
performEffect effect =
    case effect of
        Loopback msg ->
            Task.perform identity <| Task.succeed msg


        DomFocus msg id ->
            Task.attempt msg (Dom.focus id)

Same as update but returning a list of Effect.

Same as Cmd.map, but for an Effect.