Error manipulating the DOM

[naccib]

I am having trouble with the Html.Atrributes.
Say I have got a function that creates a simple modal form:

createModal : String -> Model -> Html.Html Msg
createModal modalId model =
    div [ id modalId, attribute "uk-modal" "" ]
        [ div [ class "uk-modal-dialog" ]
            [ button [ class "uk-modal-close-default", type_ "button", attribute "uk-close" "" ]
                []
            , div [ class "uk-modal-header" ]
                [ h2 [ class "uk-modal-title" ]
                    [ text "Add a new Note" ]
                ]
            , div [ class "uk-modal-body" ]
                [ div [ class "uk-margin" ]
                    [ label [ class "uk-form-label", for modalId ]
                        [ text "Note Title" ]
                    , input [ onInput UpdateTitle, class "uk-input", type_ "text" ]
                        []
                    ]
                , div
                    [ class "uk-margin" ]
                    [ label [ class "uk-form-label", for modalId ]
                        [ text "Note Title" ]
                    , textarea [ onInput UpdateContent, class "uk-textarea", attribute "rows" "5" ]
                        []
                    ]
                ]
            , div [ class "uk-modal-footer" ]
                [ button [ onClick AddTodo, class "uk-button uk-button-primary", type_ "button" ]
                    [ text "Save" ]
                ]
            ]
        ]

That is called in the view function, along with other functions that create another elements.

Ant this update function:

-- Just a helper.
createTodo : String -> String -> Todo
createTodo title content =
    Todo title content False

update : Msg -> Model -> Model
update msg model =
    case msg of
        AddTodo ->
            let
                newTodos =
                    List.append [ model.form ] model.todos
            in
                { model | todos = newTodos, form = createTodo "" "" }

        UpdateTitle value ->
            { model | form = createTodo value model.form.content }

        UpdateContent value ->
            { model | form = createTodo model.form.title value }

        DeleteTodo title content ->
            let
                newTodos =
                    -- There is a bug here: If two cards have the same title AND content, they will both get deleted :(
                    List.filter (\el -> el.content /= content && el.title /= title) model.todos
            in
                { model | todos = newTodos }

        NoOp ->
            model

I get the following error when the Save button is pressed, as well as everytime after the first time I press the Save button:

 Uncaught TypeError: Cannot read property 'childNodes' of undefined
    at addDomNodesHelp (app_dev.js:6928)
    at addDomNodesHelp (app_dev.js:6936)
    at addDomNodesHelp (app_dev.js:6936)
    at addDomNodesHelp (app_dev.js:6936)
    at addDomNodesHelp (app_dev.js:6936)
    at addDomNodesHelp (app_dev.js:6936)
    at addDomNodes (app_dev.js:6855)
    at applyPatches (app_dev.js:6984)
    at updateIfNeeded (app_dev.js:7324)

I am running Elm 0.18.0 on Kubuntu 16.10 LTS and Google Chrome 56.0.2924.87 (Official Build) (64-bit).
I've been able to reproduce this error on Firefox 56.

I tried to make the example as minimal as possible, sorry if I made it too minimal (or not minimal at all).

Edit 1.: I have found that this error does not occurs if I don't manipulate the model. So if do

 onClick NoOp

on the button, instead of

 onClick AddTodo

It does not errors.

[process-bot]

Thanks for the issue! Make sure it satisfies this checklist. My human colleagues will appreciate it!

Here is what to expect next, and if anyone wants to comment, keep these things in mind.

[process-bot]

Thanks for the issue! Make sure it satisfies this checklist. My human colleagues will appreciate it!

Here is what to expect next, and if anyone wants to comment, keep these things in mind.

[evancz]

Can you get it down to an http://sscce.org/?

If so, it probably makes sense to open it on https://github.com/elm-lang/virtual-dom

If it really seems to be an issue in core, please open a new issue here with the SSCCE!

[evancz]

Can you get it down to an http://sscce.org/?

If so, it probably makes sense to open it on https://github.com/elm-lang/virtual-dom

If it really seems to be an issue in core, please open a new issue here with the SSCCE!