Select box in elm


#1

Hi everyone.

I am a beginner to elm and I was trying to create a select box in elm. I couldn’t find an example to build off of but I found an about someone’s experience regarding elm. Omegle They highlighted that it was quite difficult to do a select box in elm and ultimately elm wasn’t pragmatic to use. Appvalley The article was written in November 2016 and I was wondering if it is as difficult to create a select box as it is made out to be in the article?

Thanks


#2

Hello man.

You can find select-elements in html on the official package manager. I found a coulple by searching “select”.

Building one from scratch can be a hassle because, in my opinion, the html-native select/option elements doesn’t map very well to elms programming model. This obviously depends on how much functionality you need :sunny:


#3

Hey Jacob,
welcome to the Elm community!

If you have the link to the article you mentioned it could be useful to post it here so we can better understand the argumentation of the original author.

Here is an ellie (working example) referenced in this Stackoverflow answer.

It’s just html and straightforward to implement. That being said, there is discussion around the usefulness of select elements. You can argue that few elements are better selected via a radio group and many elements are better selected by a text input with autocomplete. Therefore the higher level ui package elm-ui has decided against implementing it.

If you still want to use it and don’t just want to implement it for yourself, searching for select on elm-package will give you many results with examples.


#4

Hi, Jacob!

I’m also curious about the article itself, because I cannot comment much without that context, and we might all be missing something important :slight_smile:

In particular, I am wondering if the question is about the specific task “I need to make a select box”, or whether “is Elm ok to use if someone made a post about selects being hard?” I will be answering about the former, but I apologise if I missed the question.

For most implementations, a custom select box will be moderately complex. I find that it rarely has to do with the implementation technology (I know I’ve been asked to write one in React, Vue, or just styling the native one). A select box needs specific functionality and semantics to be accessible like the native HTML <select>. Most implementations I see online (again, regardless of technology) are something that only works for sighted, mouse users.

While what I said might make it seem daunting (sorry about that), I think that the expected semantics and interaction is actually well documented! A select box like native <select> is known as a “list box”, and is documented by the ARIA Authoring Practices. Whenever I’m in doubt about some behaviour, I consult those; they have great writeups and demos of implementations!

A further question is what the intent behind a custom select box is. A common sentiment I see is that the native select is hard to style. This article by Filament Group has a good walkthrough of styling. I’m not going to say that you don’t need it, because I don’t know what you are using it for.

As for a select in Elm, there are some early pitfalls by trying to “componetise” too early, and I know some people will get frustrated by that. Beyond that, implementing a select requires interacting with keyboard events, and managing focus a little. Those things are sometimes less familiar with the “declarative” workflows, like Elm, React, parts of Vue etc.


#5

This came up on reddit recently, so I’m sure this is the article OP is referring to:


#6

Hey! I have been playing with elm for the past 3-4 weeks, I am an analytics manager by day so I am not a programmer. I would advice to stick with it for few weeks because while it does get weird at times once it “clicks” you can appreciate the beauty of everything (like not having to do html and css, for starters).

Anyway, I actually have done this. You can build your own elements and then wrap them in the elm-ui* html function. This way you can add your own elements to elm-ui.

`* Just use elm-ui when you are starting, you’ll understand better why doing things in elm pays off.

import Element as El exposing (column, html, layout, text)
import Html as Html exposing (Html, div, option, select, text)

buildSelect : List Model -> El.Element SelectedMsg
buildSelect options =
    El.html -- <- this one wraps an Html Msg type into an El.Element Msg type
        (select -- <- This one is from elm-html library
            [ Events.on "change" <|
                D.map SelectedOption Events.targetValue
            ]
            (List.map strToOption <| List.map .selectedOption countries)
        )

And here is the beautiful part, you can now use buildSelect inside an elm-ui layout:

countries =
    [ Model "Italy", Model "Spain", Model "Germany" ]


view : Model -> Html Msg
view model =
    El.layout [] <|
        El.column []
            [ buildSelect countries
            , El.text model.selectedOption
            ]

If this helps, let me know I can clean up my code and put a working example with comments on github.

As for “should we have select elements in our UIs”, I don’t know. I know from working in enterprise that anything you change for your end users is going to impact adoption. Since I am looking to use Elm more in enterprise/analytics settings and here people use drop downs daily (i.e. Excel), I don’t think I can afford at this point to remove them.