Tabs don't render ripples nor active bottom-line

[igorsantos07]

I'm using 1.7.0, as it seems it could fix the ripples in Tabs, but... It doesn't seem to make a difference here. Might be some error in my code? in my code?

See that the first tab is active, but there's no thick line under it. Also, there's no ripples effect.

MainLayout.js

import React, { Component } from 'react'
import { Layout, Header, HeaderRow, Drawer, Content } from 'react-mdl'
import NavigationBar from '../components/NavigationBar'

export default class MainLayout extends Component {

  render() {
    return (
      <Layout fixedHeader fixedTabs>
        <Header>
          <HeaderRow title="Project"/>
          <NavigationBar />
        </Header>

        <Drawer title="Drawer"/>

        <Content>
          <div id="page-content">
            {this.props.children}
          </div>
        </Content>

      </Layout>
    )
  }
}

NavigationBar.js

import React, { Component } from 'react'
import { Link } from 'react-router'
import { Tabs, Tab } from 'react-mdl'

export default class NavigationBar extends Component {

  constructor(props) {
    super(props)
    this.state = { active: 0 }
  }

  render() {
    return (
      <Tabs ripple activeTab={this.state.active} onChange={id => this.setState({ active: id })}>
        <Tab component={Link} to="/test">Test</Tab>
        <Tab component={Link} to="/growth">Growth</Tab>
        <Tab component={Link} to="/cost">Cost</Tab>
        <Tab component={Link} to="/summary">Summary</Tab>
      </Tabs>
    )
  }

}

[tleunen]

Hi @igorsantos07, just by curiosity, could you show me the generated html for the tabs? I wonder if there's the is-active classname on the active tab or not.

For the ripple, I know of an issue where sometimes the ripple is not triggered when using the click on a laptop trackpad.

Note: Do you know you could also use the <HeaderTabs> for your use case?

[igorsantos07]

It seems the codepen from the docs page is not functioning perfectly as well... The tabs underline even blink, but there's no actual ripples.

[igorsantos07]

There is is-active on the mdl-tabs__tab element. Not sure if you noticed but the active tab text is darker than the other one in the previous screenshot.

I'm indeed using a notebook, but with a mouse; not sure if it makes a difference on that edge case. I tested the tabs from my phone as well: they behave the same way.

And no, I didn't know about HeaderTabs. I was converting a pure MDL markup into react-mdl and began on the tabs... When I replaced the layout components I just overlooked the rest of the sample haha Could the HeaderTabs component be mentioned in the Tabs doc as well? Plus: what's the difference? I don't recall seeing those on the pure MDL docs and common tabs were working ok.

I used HeaderTabs instead: they now show the correct underline, but there's still no ripples :( On the other hand, it seems the link binding for HeaderTabs > Tab[component=Link] do not work? I'm now getting an error as if MDL were trying to find an ID with the link address (i.e. Failed to execute 'querySelector' on 'Element': '#/growth' is not a valid selector.). That didn't happen with Tabs > Tab[component=Link]

[tleunen]

You can see an example of HeaderTabs in this page: https://tleunen.github.io/react-mdl/components/layout/ (at the bottom).

But it seems you've found an issue when using a custom component. I'll try to setup something to reproduce the issue with react-router Link. (Unless you already have a codepen reproducing the issue?)

Thanks for reporting it!

[igorsantos07]

I don't quite remember exactly, but I'm pretty sure I removed the custom component and the ripple effect still didn't appear.

i'll re-test this tomorrow, when I'm back to the project in question :)

[igorsantos07]

Indeed @tleunen, with or without the custom component the behaviour is the same: a slight blink on the underline animation and no ripple. Will create a codepen for this.

[igorsantos07]

Pretty easy. Here's the codepen, using the exact same code you give as sample for Layout with fixed tabs - I just added the ripple property but nothing changed (undocumented property, btw; had to look into the source to make sure it exists).

I should point that I discovered what's that "blink" by reducing animation speed on DevTools: the underline is instantly set and then it disappears and moves from the beginning to the end of the tab. Its first, instant appearance should not happen :)

[tleunen]

I can see the underline on my end. Just by curiosity, can you reproduce your underline issue on MDL? https://getmdl.io/components/index.html#layout-section

[igorsantos07]

It seems this issue is still alive, ripples are not happening on HeaderTabs or Tabs; see this codepen. I got confused with my implementation and ended up opening #393 because if this :sweat_smile:

[tleunen]

Not sure yet why it doesn't work in your example while it works in our website. Definitely related to #394 so lets keep the discussion there