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 <[email protected]
> <javascript:>> wrote:
>
>> (and Attr is an alias for Html.Attributes)
>>
>> On Mon, Feb 27, 2017 at 10:16 AM, Nick H <[email protected]
>> <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, <[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.
