preact-mdl icon indicating copy to clipboard operation
preact-mdl copied to clipboard

[MDL bug for info] Cannot dynamically add Tabs

Open IrregularShed opened this issue 7 years ago • 8 comments

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.

IrregularShed avatar Feb 20 '17 18:02 IrregularShed

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

developit avatar Feb 21 '17 00:02 developit

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

IrregularShed avatar Feb 21 '17 01:02 IrregularShed

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

developit avatar Feb 21 '17 03:02 developit

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

IrregularShed avatar Mar 06 '17 16:03 IrregularShed

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

developit avatar Mar 06 '17 20:03 developit

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.

KrofDrakula avatar Mar 07 '17 08:03 KrofDrakula

@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!

IrregularShed avatar Mar 07 '17 09:03 IrregularShed

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

hemna avatar Jul 15 '22 23:07 hemna