Best way to integrate with Material Design Components?

This is probably less of an issue and more of an ask, but I’m trying to integrate with https://github.com/material-components/material-components-web/tree/master/packages/mdc-tabs and running into a console error. My code is here:

https://codepen.io/dizzle/pen/VyrMVe

And for sanity, here’s another version without Hyperapp: https://codepen.io/dizzle/pen/xpPPKx

The main thing it’s doing is using the element to initialize the Material Design component, as well as using it as a source of local state so that I can reference it later.

element.mdcComponent = new window.mdc.tabs.MDCTabBar(element);

While the codepen works, the console error showing up whenever a tab is clicked is:

Uncaught Error: Invalid tab component given as activeTab: Tab not found within this component's tab list
    at MDCTabBar.setActiveTab_ (VM554 material-components-web.js:2239)
    at HTMLElement.tabSelectedHandler_ (VM554 material-components-web.js:2151)
    at MDCTab.emit (VM554 material-components-web.js:379)
    at Object.notifySelected (VM554 material-components-web.js:2036)
    at HTMLAnchorElement.MDCTabFoundation._this.clickHandler_ (VM554 material-components-web.js:11772)

which makes me think the element for a Tab is changing at some point, although I don’t see how because destroy is never being called.

This is a screenshot of the exception being thrown:

And these are some console commands I ran to try to confirm that the activeTab was not contained in the tabs array (even though the innerText matches)

I realize that the MDC library is not something you may have worked with before, but do you happen to have any ideas what might be going on here?

Thanks!

[developerdizzle]

I may have found my issue. After debugging, I found that MDCTab constructor was being called twice for each tab. It looks like MDCTabBar automatically calls this for its children. Removing that code seems to have fixed my issue.

[selfup]

Oh glad you have found a useful way to integrate MDC!

🎉