Hi! It's good of you to post your findings from the MDN docs. But
currently, for my setup (Mac/Chrome/Safari), the fact is that select *does*
seem to fire onInput.
Even when I posted my problem earlier I think onInput was firing. I had
convinced myself that the issue was with the selected attribute.
But who knows? I actually deleted my original post because I can't
replicate my problem at all any more. Everything seems to work now.
At the risk of making a rather long 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 ]
[ 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:30:41 UTC, Nick H wrote:
>
> OK, upon double-checking the MDN docs for select
> <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select>and
> input <https://developer.mozilla.org/en-US/docs/Web/Events/input>, I can
> confirm that select does not fire "onInput". Elm does not have a built-in
> "onChange" event handler, so I think that the custom event handler is the
> only solution. And now I will stop pinging the thread :-)
>
> On Mon, Feb 27, 2017 at 10:17 AM, Nick H <falling...@gmail.com
> <javascript:>> wrote:
>
>> (and Attr is an alias for Html.Attributes)
>>
>> On Mon, Feb 27, 2017 at 10:16 AM, Nick H <falling...@gmail.com
>> <javascript:>> 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.
