MDC TabBar animation not working.

[ant04x]

Hi!

This is my first issue on Github, I hope to publish all fine... 😋

I'm trying to migrate from the external version (Unpkg) to the local version (NodeJS) for my PWA and everything works except the tab-bar animation changing the selected tab.

<div class="mdc-tab-bar" role="tablist">
    <div class="mdc-tab-scroller">
        <div class="mdc-tab-scroller__scroll-area" style="margin-bottom: 0px;">
            <div class="mdc-tab-scroller__scroll-content">
                <!---->
                <button role="tab" class="mdc-tab mdc-tab--active" aria-selected="true" tabindex="0">
                    <span class="mdc-tab__content">
                        <i aria-hidden="true" class="material-icons mdc-tab__icon">
                            <svg>
                                <path d="..." />
                            </svg>
                        </i>
                    </span>
                    <span class="mdc-tab-indicator mdc-tab-indicator--active">
                        <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                    </span>
                    <span class="mdc-tab__ripple"></span>
                </button>
                <!---->
                <button role="tab" class="mdc-tab" aria-selected="false" tabindex="-1">
                    <span class="mdc-tab__content">
                        <i aria-hidden="true" class="material-icons mdc-tab__icon">
                            <svg>
                                <path d="..." />
                            </svg>
                        </i>
                    </span>
                    <span class="mdc-tab-indicator">
                        <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                    </span>
                    <span class="mdc-tab__ripple"></span>
                </button>
                <!---->
            </div>
        </div>
    </div>
</div>

I've installed all MDC components via NPM because I use the most of them, and then I instantiate all the components that I'm using. This is all that I use for the tab bar:

import * as mdc from 'material-components-web';
...
const tabs = [].map.call(document.querySelectorAll('.mdc-tab'), function (el) {
    return new mdc.tab.MDCTab(el);
});

const tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));

const tabIndicators = [].map.call(document.querySelectorAll('.mdc-tab-indicator'), function (el) {
    return new mdc.tabIndicator.MDCTabIndicator(el);
});

const tabScroller = new mdc.tabScroller.MDCTabScroller(document.querySelector('.mdc-tab-scroller'));

I'm asuming that use the tab-bar don't requires a code for the changing selection... At least with the externals resources it didn't need it...

Finally, because I'm not importing external resources, I don't use anything from the auto-init package. Everything that needs it with the external resources for the animations, works perfectly without all the auto-init things, the textfield for example, but my tab bar not, it stays without any move. 😐

Thanks and have a nice day!

[allan-chen]

Hello,

Thanks for reaching out. Do you see any errors in the console? To help us debug this issue, please consider producing a Glitch demo (glitch.com) for us to look at together. Here's a sample repro from another bug.

[ant04x]

Allright, there was an error that I thought it was provoked by other thing and noup... 😅

In the end it was I had imported a component I was not using it in the HTML structure, crashing in an error and impeding the importation of the Tab Bar component.

Thank U for your amazing help!! 🤗 And sorry for be such a rookie...