onInput for select's not firing on Edge

[jesse-c]

(originally filed at elm/html#198)

The onInput event isn't firing for the Edge browser on Windows 10 (using a VM from Microsoft). The SSCCE works as expected on Firefox (nigthly) and Chrome (latest).

Microsoft Edge 44.17763.1.10 (aka 18)
Microsoft EdgeHTML 18.17763

SSCCE

Change the select option and see if the model is updated.

Ellie

module Main exposing (main)

import Browser
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)


type alias Model =
    { count : Int, selected : String }


initialModel : Model
initialModel =
    { count = 0, selected = "" }


type Msg
    = Input String


update : Msg -> Model -> Model
update msg model =
    case msg of
        Input v ->
            { model | selected = v }


view : Model -> Html Msg
view model =
    div []
        [ div []
            [ select [ onInput Input ]
                [ option [ value "" ] [ text "" ]
                , option [ value "one" ] [ text "one" ]
                , option [ value "two" ] [ text "two" ]
                ]
            ]
        , div [] [ text <| "Selected: " ++ model.selected ]
        ]


main : Program () Model Msg
main =
    Browser.sandbox
        { init = initialModel
        , view = view
        , update = update
        }

@pd-andy found 2 related issues:

• https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7194628/
• https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4660045/

The second links to a JSFiddle [1] illustrating that it doesn't work with oninput, but if you change it to onchange, it does.

[1]

<select oninput="alert('select fired input event');">
    <option>Initial</option>
    <option>Another</option>
    <option>Some more</option>
</select>

[matssigge]

I just ran into this same problem. I managed to work around it by using elm-community/html-extras, which exposes onChange. That works in Edge, and seems to work just as well as onInput in other browsers.

Edit: Note @pd-andy's comment below. onInput and onChange are not identical, so this is only a workaround, not a replacement.

[hayleigh-dot-dev]

There is a subtle difference between onInput and onChange, namely the latter will only fire when the selected option changes (as the name would suggest).

onInput can be useful when you want to be able to deselect something by selecting the option again.

[matssigge]

Great clarification. In my case it doesn't matter, so I mostly wanted to leave a note for anyone else having this problem (and possibly future me 😄). But I'll edit my first comment so it's clear that it's not a replacement, just a workaround.

Also, if I understand this correctly, this is actually a bug in Edge, not in Elm.