Dynamically-updated Material.List throws runtime error

[SebastianKG]

The Problem

When using a Material.List containing Material.List.ListItems, if the model changes and changes the contents of the rendered list, the list breaks and throws runtime errors. This has only been repro'd in a webpack-bundled environment (using https://github.com/simonh1000/elm-webpack-starter), with the JS and CSS material-components-web-elm files included in the index.html, but it is possible that it has nothing to do with that.

Repro

Repro code here: https://github.com/SebastianKG/elm-webpack-starter-mcwe-bug. Steps to repro:

1. clone the repo above
2. npm install
3. npm run dev
4. navigate to localhost:3000
5. click "Add element"
6. notice that no element is added to the list, and that the console is filled with the following error:

   Uncaught TypeError: Cannot read property 'setAttribute' of undefined
   at HTMLElement.set (custom-element.js:30)
   at _VirtualDom_applyFacts (Main.elm:2842)
   at _VirtualDom_applyPatch (Main.elm:3719)
   at _VirtualDom_applyPatchesHelp (Main.elm:3702)
   at _VirtualDom_applyPatches (Main.elm:3693)
   at eval (Main.elm:4066)
   at updateIfNeeded (Main.elm:4600)

[SebastianKG]

The bug actually can be reproduced in an Ellie: https://ellie-app.com/9fLZPLHRpH2a1 So, the bundler wasn't the issue.

[aforemny]

Hi @SebastianKG, thanks a bunch for this issue! Upon a quick glance, it seems it is related to #67. I will investigate this more thoroughly, but if you change line 39f to say

data =
    "element" :: model.listElements

so that the list is never empty, it seems to go away. Anyways, it helps a bunch to have a reproducible code example for this. Thanks again! :)

[aforemny]

Hi @SebastianKG, this should be resolved with 9f7142a31a837d703b7df1ae1cfd2ae45f2f9cc0. I will publish a patch release shortly.

Note that in the upcoming major release, this won't be possible anymore because of 536f27c6eb383c9232d91b31b4f5e12e79c803fc.

Thanks for your help in sorting this out!