My guess would be that this behavior is caused by changing from 3 to 2
options while doing the first selection.
Chrome Inspector doesn't even show me the "selected" attribute.
But with a static list of 3 items it works as expected
(change your view function to below to see)
view model =
select
[ onInput Switch ] <|
[ option [ value "1"
, selected <| model == Just "1"
] [ text "one" ]
, option [ value "2"
, selected <| model == Just "2"
] [ text "two" ]
, option [ value "3"
, selected <| model == Just "3"
] [ text "three" ]
]
My gut feel is that the virtual DOM diff engine is messing things up: on
the second render, elm knows you now have 2 instead of 3 options, but elm
does NOT know which of the original option has gone.
You may want to check out Html.keyed, which is introduced specifically to
tackle
this. http://package.elm-lang.org/packages/elm-lang/html/1.1.0/Html-Keyed
I copied the refactored code (with keyed) below. not sure if it solves your
issue though.
Unfortunately, Elm-try does not recognize Html.keyed (yet).
module Test exposing (..)
import Html exposing (..)
import Html.Keyed as Keyed
import Html.App as App
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import List exposing (map)
import Json.Decode as Json
type alias Model =
Maybe String
init = Nothing
type Msg
= Switch String
update (Switch s) model =
Debug.log"" <| Just s
view model =
let
kvs =
[ ("1", "One")
, ("2", "Two")
]
-- makeOpts now returns List (String, Html Msg) to use in Html.keyed
makeOpts lst selectedKey =
lst
|> map (\(k, v) ->
(k, option
[ value k
, selected <| k == selectedKey
] [ text v ])
)
in
Keyed.node "select"
[ onInput Switch ] <|
case model of
Just s ->
makeOpts kvs s
Nothing ->
makeOpts
(("0", "Zero") :: kvs)
"0"
main = App.beginnerProgram
{ model = init
, view = view
, update = update
}
--
You received this message because you are subscribed to the Google Groups "Elm
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/d/optout.
