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, <agjf....@gmail.com <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 elm-discuss...@googlegroups.com <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 elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
