Why do I get a runtime error

Learn
1

I was fiddling around with Elm a little bit and like it so far.However, I ran into a problem an think you might be able to tell me how to fix it.

https://ellie-app.com/4S2bzhfphyJa1

As soon as i have some valid XML on the left side, there is an error in the console. The error is caused by line 62. Since it is really hard to debug Elm (at least I had nod yet figured out how to do it), I’m not sure if this is a bug in elm-ui or if i did something wrong.

Any thoughts?

2

Something seems to be wrong with HA.contenteditable

When I change row 62 to this it works:

E.htmlAttribute (HA.attribute "contenteditable" "true" )
3

That’s a good idea, thank you!

But I still wonder why the other ends in an error, even if it should do the same thing. I think it’s a bug in one of the involved frameworks.

4

I have reduced your problem: https://ellie-app.com/4S7MDdqsNQba1

Swap False for True on line 39 to get a runtime error.

It is unrelated to either the xml or style-elements packages. There error relates to elm/virtual-dom and how it handles properties.

module Main exposing (main)

import Browser
import Html exposing (Html)
import Html.Attributes as HA
import Task
import Json.Encode


main =
    Browser.element
        { init = init
        , update = update
        , view = view
        , subscriptions = always Sub.none
        }


init : () -> ( Bool, Cmd () )
init flags =
    ( False
    , Task.perform identity (Task.succeed ())
    )


update : () -> Bool -> ( Bool, Cmd msg )
update () _ =
    ( True, Cmd.none )


view : Bool -> Html msg
view loaded =
    case loaded of
        True ->
            Html.div [] []

        False ->
            Html.div
                [ (if False then
                       (HA.property "contentEditable" (Json.Encode.bool True))
                   else
                       (HA.attribute "contentEditable" "true")
                  )
                ]
                [ Html.text "initial" ]
2 Likes
5

Github issue: https://github.com/elm/virtual-dom/issues/151

6

Optimistic bump :slight_smile:

7

Elm Virtual Dom diffing algorithm tries to remove the contentEditable property by doing:

node.contentEditable = null;

which is not supported for contentEditable.

You can produce the same error by doing in a javascript console:

document.body.contentEditable = null

This is a known bug traced here: bug #104 (specifically #81)

I guess that the work-arounds are:

  • use attribute "contenteditable" instead
  • or set the property to Encode.bool False instead of removing it from your attributes
  • or use Html.Keyed with a different identifier to force the div to be rebuilt
1 Like
8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.