Dynamically-updated Material.List throws runtime error
Closed this issue · 3 comments
The Problem
When using a Material.List
containing Material.List.ListItem
s, 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:
- clone the repo above
- npm install
- npm run dev
- navigate to localhost:3000
- click "Add element"
- 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)
The bug actually can be reproduced in an Ellie: https://ellie-app.com/9fLZPLHRpH2a1
So, the bundler wasn't the issue.
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! :)
Hi @SebastianKG, this should be resolved with 9f7142a. I will publish a patch release shortly.
Note that in the upcoming major release, this won't be possible anymore because of 536f27c.
Thanks for your help in sorting this out!