# Setting focus on a select option

**URL:** https://discourse.elm-lang.org/t/setting-focus-on-a-select-option/2728
**Category:** Learn
**Created:** [December 8, 2018, 9:29pm UTC](https://discourse.elm-lang.org/t/setting-focus-on-a-select-option/2728 "2018-12-08T21:29:53Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Libbum](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/libbum/32/1311_2.png) [@Libbum](https://discourse.elm-lang.org/u/Libbum)
#### Post date: [December 8, 2018, 9:29pm UTC](https://discourse.elm-lang.org/t/setting-focus-on-a-select-option/2728/1 "2018-12-08T21:29:53Z")

</div>

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](https://ellie-app.com/46PqBT8q73ja1)

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

```elm
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_)?

---

<div class="post-metadata">

### Author: ![malaire](https://avatars.discourse-cdn.com/v4/letter/m/b782af/32.png) [@malaire](https://discourse.elm-lang.org/u/malaire)
#### Post date: [December 8, 2018, 10:04pm UTC](https://discourse.elm-lang.org/t/setting-focus-on-a-select-option/2728/2 "2018-12-08T22:04:08Z")

</div>

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](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

---

<div class="post-metadata">

### Author: ![Libbum](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/libbum/32/1311_2.png) [@Libbum](https://discourse.elm-lang.org/u/Libbum)
#### Post date: [December 8, 2018, 10:13pm UTC](https://discourse.elm-lang.org/t/setting-focus-on-a-select-option/2728/3 "2018-12-08T22:13:05Z")

</div>

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!

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)
#### Post date: [December 18, 2018, 10:13pm UTC](https://discourse.elm-lang.org/t/setting-focus-on-a-select-option/2728/4 "2018-12-18T22:13:10Z")

</div>

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