Elm - onBlur from dynamically created input

Question

The onBlur event in Html.Events does not allow for any values to be passed with it, as far as I understand. There is a way to make it include the value of the input (see this question for example: Elm Html.Events - Pass input value to onBlur message), but how can I also make it include another value?

My use case is that I generate a list (ul) from a list I have in my model, and this list can be any size, so I can not have a specific message for each input. Instead I would like something like this for each item:

            input
                [ value someValue
                , onBlur UpdateItem uniqueId
                ]
                []

That way I could update the specific item in my model based on the id I got from the onBlur message.

How can I do this?

Update: To clarify my question: I also need the value from the input, so I need to both pass my id and get the targetValue (as in the question I linked above).

(For future visitors: I use Elm 0.18)

Simon H Simon H · Accepted Answer · 2017-04-19T07:52:46

My suggestion would be to use onChange, which you need to define yourself, and is triggered at the same time as the blur event.

onChange : (String -> msg) -> Attribute msg
onChange msgCreator =
    Html.Events.on "change" (Json.map msgCreator Html.Events.targetValue)

then define a message to carry the new value and its id

type Msg 
   = UpdateItem Id String

and then make sure to use the defaultValue attribute (rather than value)

 input 
     [ defaultValue someValue
     , onChange (UpdateItem uniqueId) ]
     []

Elm - onBlur from dynamically created input

1 Answers