developit / preact-mdl

:boom: A collection of Preact Components that encapsulate Google's Material Design Lite.
MIT License
187 stars 20 forks source link

[MDL bug for info] Cannot dynamically add Tabs #34

Open IrregularShed opened 7 years ago

IrregularShed commented 7 years ago

This is for information for anyone else pulling their hair out - there's a fundamental flaw in the implementation of the tabs in MDL that you will hit in any dynamic frontend library.

https://github.com/google/material-design-lite/issues/1165

Due to the way that the elements used for the tabs (and panels) are found and decorated, any tabs added to a tab set after an initial render won't get the JS listeners invoked. I've found that the first tab in the set gets a second listener instead of the second tab getting it.

There's workarounds in the linked issue - I'm trying to find the best one for my use case at the moment.

developit commented 7 years ago

Interesting - I haven't seen this issue come up on ESBench, which uses dynamic tabs. Not sure why!

IrregularShed commented 7 years ago

Luck of the draw? ;) I'll have to take a look at that tomorrow and see what's different.

developit commented 7 years ago

heh - yeah probably. also it's probably an ancient version of mdl at this point.

IrregularShed commented 7 years ago

I've been getting some more janky results with MDL. I click on one TextField and a second one (and sometimes third) gets highlighted with it.

It looks like MDL doesn't remove event listeners when downgradeElements() is called, and just sort of hopes that things work out on their own when pages are navigated away. Obviously in a single page app this doesn't actually happen much.

The kicker for me is that MDL has been more or less abandoned by the project developers in favour of https://github.com/material-components/material-components-web, but the first I knew about it was half an hour ago when trying to find a fix in a newer branch of MDL.

image

developit commented 7 years ago

I'm really hoping to start work on a Preact wrapper around material-components-web.

KrofDrakula commented 7 years ago

After reading this issue, I've started facepalming at my decision to go with mdl on a personal project. :/ I love how Google loves starting and torching projects even they deem as being the way forward.

IrregularShed commented 7 years ago

@developit If I thought I stood a chance of getting somewhere (anywhere) within a realistic timeframe I'd have started already. Life is too complicated at the moment.

@KrofDrakula Exactly the same feeling here!

hemna commented 2 years ago

I just discovered MDL and am trying to dynamically create tabs and tab content, and it seems impossible. :(