Hi! It's good of you to post your findings from the MDN docs. But
currently, for me (Mac/Chrome/Safari), the fact is that select *does* seem
to fire onInput.
Even earlier, when I initially posted my problem, I think onInput was
firing. I had convinced myself that the issue was with the selected
attribute.
But who know? I deleted my original post because I couldn't replicate my
problem at all any more. It seems to work after all.
At the risk of making an overlong post, here is the full program I ended up
with:
module Main exposing (..)
import Set exposing (..)
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Http
import Json.Decode as Decode
main =
Html.program
{ init = init "cats"
, view = view
, update = update
, subscriptions = subscriptions
}
-- MODEL
type alias Model =
{ nowTopic : String
, nextTopic : String
, listTopics : Set String
, selectedTopic : String
, gifUrl : String
, errMsg : String
}
init : String -> ( Model, Cmd Msg )
init topic =
( Model "" topic (Set.singleton topic) topic "waiting.gif" ""
, getRandomGif topic
)
-- UPDATE
type Msg
= MorePlease
| NewGif (Result Http.Error String)
| ChangeTopic String
| SelectTopic String
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
MorePlease ->
{ model | listTopics = insert model.nextTopic model.listTopics }
! [ getRandomGif model.nextTopic ]
ChangeTopic s ->
{ model | nextTopic = s } ! []
SelectTopic s ->
{ model | nextTopic = s, selectedTopic = s } ! []
NewGif (Ok newUrl) ->
{ model | nowTopic = model.nextTopic, gifUrl = newUrl, errMsg =
"" } ! []
NewGif (Err httperr) ->
let
e =
case httperr of
Http.BadUrl _ -> "Bad Url"
Http.Timeout -> "Timeout"
Http.NetworkError -> "Network Error"
Http.BadStatus _ -> "Bad Status"
Http.BadPayload _ _ -> "Bad Payload"
in
{ model | errMsg = e } ! []
-- VIEW
view : Model -> Html Msg
view model =
div []
[ input [ placeholder "Type topic here", onInput ChangeTopic ] []
, select [ onInput SelectTopic ]
(List.map
(makeOption model.selectedTopic)
(Set.toList model.listTopics)
)
, p []
[ button [ onClick MorePlease ] [ text "Go!" ]
, text (" " ++ model.nextTopic)
]
, div [ style [ ( "color", "red" ) ] ] [ text model.errMsg ]
, h2 [] [ text model.nowTopic ]
, br [] []
, img [ src model.gifUrl ] []
]
makeOption : String -> String -> Html msg
makeOption selectedTopic topic =
option
[ value topic, selected (topic == selectedTopic) ]
[ text topic ]
-- SUBSCRIPTIONS
subscriptions : Model -> Sub Msg
subscriptions model =
Sub.none
-- HTTP
getRandomGif : String -> Cmd Msg
getRandomGif topic =
let
url =
"https://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag="; ++ topic
in
Http.send NewGif (Http.get url decodeGifUrl)
decodeGifUrl : Decode.Decoder String
decodeGifUrl =
Decode.at [ "data", "image_url" ] Decode.string
On Monday, 27 February 2017 18:16:28 UTC, Nick H wrote:
>
> I am looking through some code where I successfully implemented a
> drop-down menu, and it appears I wrote a custom event handler. "onInput"
> did not work for me.
>
> Here is the function that I wrote (Evt is an alias for Html.Events).
>
> select : (String -> a) -> String -> List ( String, String ) -> Html a
> select sendMsg selection options =
> let
> toOption ( value, label ) =
> Html.option
> [ Attr.selected (selection == value)
> , Attr.value value
> ]
> [ Html.text label ]
>
> handler =
> Evt.on "change" (Json.map sendMsg Evt.targetValue)
> in
> Html.select [ handler ] (List.map toOption options)
>
> On Mon, Feb 27, 2017 at 6:53 AM, <[email protected] <javascript:>> wrote:
>
>> I have been trying to use Html.select (the drop-down menu).
>> Unfortunately the selected attribute doesn't seem to work for me.
>> Some context: I am attempting the exercises at the bottom of
>> https://guide.elm-lang.org/architecture/effects/http.html. As new
>> topics are entered in the input box, they should be added to the drop-down
>> menu. I found this would sporadically cause the menu selection to jump
>> around, so I tried to handle it manually using the selected attribute.
>> Anybody have any ideas how to do this so it works? The relevant piece
>> of code looks something like this:
>>
>> view : Model -> Html Msg
>> view model =
>> div []
>> [ input [ onInput ChangeTopic ] []
>> , select [ onInput SelectTopic ]
>> (List.map
>> (makeOption model.selectedTopic)
>> (Set.toList model.allTopics)
>> )
>> , button [ onClick MorePlease ] [ text "Go!" ]
>> , img [ src model.gifUrl ] []
>> ]
>>
>> makeOption : String -> String -> Html msg
>> makeOption selectedTopic topic =
>> option
>> (if topic == selectedTopic then
>> [ value topic, selected True ]
>> else
>> [ value topic ]
>> )
>> [ text topic ]
>>
>> --
>> 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] <javascript:>.
>> For more options, visit https://groups.google.com/d/optout.
>>
>
>
--
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.
