Elm onInput event handler not working on contenteditable element - dom-events

Question

I want to update my model everytime someone modifies an editable table cell.
The onInput function seems to be working well on input elements, but on a td element with contenteditable="true", the handler function never gets called.
Why?
How should I detect content change in an editable table cell then?
Please see lines 74 and 78 in the following piece of code
(I just took the "buttons" example of the Elm guide and added my stuff to it to have something minimal but runnable):
module Main exposing (..)
-- Press buttons to increment and decrement a counter.
--
-- Read how it works:
-- https://guide.elm-lang.org/architecture/buttons.html
--
import Browser
import Html exposing (Html, button, div, text, table, tbody, tr, td, input)
import Html.Events exposing (onClick, onInput)
import Html.Attributes exposing (contenteditable)
-- MAIN
main =
Browser.sandbox { init = init, update = update, view = view }
-- MODEL
type alias Model = Int
init : Model
init =
0
-- UPDATE
type Msg
= Increment
| Decrement
update : Msg -> Model -> Model
update msg model =
case msg of
Increment ->
model + 1
Decrement ->
model - 1
testOnInputHandler : String -> Msg
testOnInputHandler str =
let
log = Debug.log "in testOnInputHandler" "here"
in
Increment
-- VIEW
view : Model -> Html Msg
view model =
div []
[ button [ onClick Decrement ] [ text "-" ]
, div [] [ text (String.fromInt model) ]
, button [ onClick Increment ] [ text "+" ]
, table []
[ tbody []
[ tr []
[ td [ contenteditable True, onInput testOnInputHandler] [ text "editable!" ]
]
]
]
, input [ onInput testOnInputHandler ] []
]

Answer 1

onInput will get the string from target.value which does not exist for contenteditable input events.
You may want to grab innerText for example instead:
onContentEditableInput : (String -> msg) -> Attribute msg
onContentEditableInput tagger =
Html.Events.stopPropagationOn "input"
(Json.map (\x -> ( x, True )) (Json.map tagger innerText))
innerText : Json.Decoder String
innerText =
Json.at ["target", "innerText"] Json.string