Material-design-lite: Uncaught TypeError: Cannot read property 'classList' of null

[jalajc]

Facing this issue for a while in my design, happening mainly on tabs. I tried alternating the sequence of script and css but it didn't help either. Anyway the ripple effects fails and translate to this error when I hover/click on the tab.

Related:
Uncaught TypeError: Cannot read property 'classList' of null MaterialRipple.upHandler_ @ripple.js:243
Uncaught TypeError: Cannot read property 'style' of null MaterialRipple.downHandler_ @ ripple.js:243

[tleunen]

Probably because you didn't create the panels for the tabs. Each tab has a tab-panel. This is required because when the tabs get upgraded, the system will hide the panels except the one active.

[surma]

In addition to what @tleunen suggested:

Is it possible for you to provide a codepen that reproduces the issue? What browser and OS version are you using?

[jalajc]

Two perspective on this:

1. As tleunen pointed out, I figured out this was my mistake.
2. I was enclosing tab row inside the header row, which was failing the ripple effect on the tab. (Not sure if its my mistake, however I feel ripple should work.
   Codepen: http://codepen.io/anon/pen/xGNYNR
   Something quickly to depict.
   

Lot of stuff here

Stuff here

...

So I am not closing this now. Waiting for revert on point 2.

(Sorry folks for so late reply. it was hard to reply from such a place I have been trekking!! And for being late, willing to contribute to mdl's library documentation!)

[Garbee]

Ripple effects should only be used where specified in the docs for 1.x. It is coupled to each component uniquely.

[Cmte-Kirk]

I had this same problem, however I am using angular 2 with router.
How do I solve it?

<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
     <div class="mdl-tabs__tab-bar">
          <a routerLinkActive="is-active" class="mdl-tabs__tab" routerLink="/home">Flash Cards</a>
          <a routerLinkActive="is-active" class="mdl-tabs__tab" routerLink="/config">Configuração</a>
     </div>
     <router-outlet></router-outlet>
</div>

Thanks.

[tziuka]

I have quite similar problem; I'm using angular 4:

My navbar component template:

<header class="mdl-layout__header mdl-layout__header--scroll mdl-color--primary">
  <div class="mdl-layout--large-screen-only mdl-layout__header-row">
  </div>
  <div class="mdl-layout--large-screen-only mdl-layout__header-row">
    <h3>My Angular App</h3>
  </div>
  <div class="mdl-layout--large-screen-only mdl-layout__header-row"></div>
  <div class="mdl-layout__tab-bar mdl-js-ripple-effect mdl-color--primary-dark">
    <a [routerLinkActive]="['is-active']" [routerLink]="['home']" href="#" class="mdl-layout__tab">Home</a>
    <a [routerLinkActive]="['is-active']" [routerLink]="['login']" href="#" class="mdl-layout__tab">Login</a>
    <a [routerLinkActive]="['is-active']" [routerLink]="['register']" href="#" class="mdl-layout__tab">Register</a>
    <a [routerLinkActive]="['is-active']" [routerLink]="['dashboard']" href="#" class="mdl-layout__tab">Dashboard</a>
    <a [routerLinkActive]="['is-active']" [routerLink]="['contact']" href="#" class="mdl-layout__tab">Contacts</a>
    <a [routerLinkActive]="['is-active']" [routerLink]="['about']" href="#" class="mdl-layout__tab">About</a>
  </div>
</header>

And this is the error I get when I switch the tabs:

Uncaught TypeError: Cannot read property 'classList' of null
at S. (ripple.js:117)
at ZoneDelegate.invokeTask (zone.js:398)
at Zone.runTask (zone.js:165)
at ZoneTask.invoke (zone.js:460)
at timer (zone.js:1540)

[studentIvan]

+1 for this error, happenning in tabs.js, the related code is

panel.classList.add(ctx.CssClasses_.ACTIVE_CLASS);

@Garbee seems you have to reopen this issue

[jpodpro]

+1 for this error. i get it when using exact markup provided directly on your own website (from layout):

<header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
    </div>
    <!-- Tabs -->
    <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
      <a href="#fixed-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
      <a href="#fixed-tab-2" class="mdl-layout__tab">Tab 2</a>
      <a href="#fixed-tab-3" class="mdl-layout__tab">Tab 3</a>
    </div>
  </header>

[simonndev]

I have encountered the same issue recently. I am using Angular 5 with material-design-lite included in my angular-cli.json

At first, I put all the html div inside the body copied from https://github.com/google/material-design-lite/blob/mdl-1.x/templates/dashboard/index.html into my app.component.html. Everything works fine (focus the ripple effect) - case 1

Then I tried to move all the as an Angular separated component then whenever I click on a Tab header, the errors (given below) were thrown, and of course the ripple doesn't work - case 2

• Uncaught TypeError: Cannot read property 'classList' of null
• Uncaught TypeError: Cannot read property 'style' of null

I did an inspect on the html and found:
case 1 the <div class="mdl-layout__tab-bar mdl-js-ripple-effect mdl-color--primary-dark"> was automatically wrapped inside the (generated by material.min.js I believe) <div class="mdl-layout__tab-bar-container">...</div>

case 2 my separated component html <my-shell-header>...</my-shell-header> doesn't contain the <div class="mdl-layout__tab-bar-container">...</div> that needs to wraps around the <div class="mdl-layout__tab-bar mdl-js-ripple-effect mdl-color--primary-dark">.

I have tried to manually put in the <div class="mdl-layout__tab-bar-container">...</div> to wrap the <div class="mdl-layout__tab-bar...> But the error still occurs in the console.

Has anyone figured out how to hack this issue? Please share if any, thank you.

[ollypapi]

i am getting this error when im using angular stepper