Setting focus on a select option

I’m having trouble selecting a given option in a drop down selection.

An ellie app outlining my problem is running here:
https://ellie-app.com/46PqBT8q73ja1

Specifically, I have one select that I fill with strings from different lists:

select [] 
   <| List.map (\item -> option [ Attributes.selected (initial == item) ] [ text item ] ) model.data

I would assume that the selected attribute sets which item is selected, but that doesn’t seem to ring true all the time. initial here is the head of the model.data list, so my expectation is that this code would focus on the first item in the list.

If you run the ellie though, and select large from the dropdown (i.e. the last item in the list), then click the Weather button to update the select’s contents, you’ll see rain is the selected option.

How can I set the focus to the first option in the list (in this case sun)?

One problem with your code is that you always set first item as selected, even when user selects something else.

This ellie seems to work: https://ellie-app.com/46Q2ykw6mf9a1

Changes I made:

  1. keep track of currently selected value in Model.selected
  2. update selected value when user selects something else
  3. reset selected value when Model.data changes

Ah, yes—that makes sense. I was only thinking about the initial state rather than when the user updates the model themselves.

This should totally work for my purposes, thanks!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.