Material-ui: Event onChange on Tabs never fired... (onTouchTap never fired on tab button)

[damienfa]

(I use material-ui@^0.14.4)
I just come to copy this example from your doc (http://www.material-ui.com/#/components/tabs) to my app.
I have no error in the console and neither the "console.log".
When I click on a Tab, the ripple animation works fine, but the selection is never changing. I'm stuck on the first tab.

Have I made something wrong ? Or there is a bug ?

import React from 'react';
import Tabs from 'material-ui/lib/tabs/tabs';
import Tab from 'material-ui/lib/tabs/tab';

export default class TabsExample extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
          slideIndex: 0,
        };
      }

    handleChange = (value) => {
       console.log("Tab is changing to ",value);
        this.setState({
          slideIndex: value,
        });
    };

    render() {

        return (
        <Tabs value={this.state.slideIndex} onChange={ this.handleChange } >
                    <Tab label="First Tab" value={0}>
                        <div>CONTENT 1</div>
                    </Tab>

                    <Tab label="Second Tab" value={1}>
                        <div>CONTENT 2</div>
                    </Tab>
            </Tabs> 
        )

    }
}

Thanks !

[damienfa]

Ha, something to precise. When the state change, the tab is changing well, as well as the content.
for example, if I replace my constructor by this code, the tab changes automatically after 3 seconds.

constructor(props) {
        super(props);
        this.state = {
          slideIndex: 0,
        };

        setTimeout( () => {
            this.setState({ slideIndex: 1});
        }, 3000);
}

But I can't make it works with a mouse click... Any idea ?

[alitaheri]

Could you try reproducing this with values of 1 and 2 instead of 0 and 1? It might be caused by falsy values. if so it's a bug! :beetle:

[damienfa]

I've tried but it's the same... It's not caused by falsy values...
Can you reproduce it ?
Why do the inkBar doesn't move when I click on the unselected tab ??? The selection is stuck on the initial item... and I'm stuck too about that...

[alitaheri]

@damienfa For now you can do use this workaround:

export default class TabsExample extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
          slideIndex: 0,
        };
      }

    handleChange = (value) => {
       console.log("Tab is changing to ",value);
        this.setState({
          slideIndex: value,
        });
    };

    render() {

        return (
        <Tabs value={this.state.slideIndex}>
                    <Tab label="First Tab" value={0}  onActive={() => this.handleChange(0) } >
                        <div>CONTENT 1</div>
                    </Tab>

                    <Tab label="Second Tab" value={1}  onActive={() => this.handleChange(1) }>
                        <div>CONTENT 2</div>
                    </Tab>
            </Tabs> 
        )

    }
}

I hope this works out for you. If it does don't close this issue. We should fix onChange!

[damienfa]

Thanks for your answer... but, no, it doesn't change nothing...
I guess it comes from the click/touch event on the Tab. The onActive isn't called because it doesn't "activate" the second tab on click. Important : it works fine when I select the tab with the keyboard !
The ripple animation works fine on click, but the inkBar doesn't move (and the onActive / onChange events aren't called). I think that EnhancedButton never fire "onTouchTap" callback...

[alitaheri]

I see... any chance you aren't injecting the react-tap-event-plugin? take a look here. Follow those instructions and let me know if it fixes it.

[damienfa]

hohoho... :cold_sweat: I missed that ! and it solves my problem !
Thanks !
PS : Why don't you put that in the material-ui dependencies ? (and check on the react-version to import it or not).

[alitaheri]

PS : Why don't you put that in the material-ui dependencies ? (and check on the react-version to import it or not).

We've had looooong discussions for this. It proves to be harder than it seems :cry: I'm glad your issue is resolved. we'll do our best to provide some sort of warning when the plugin isn't injected. :+1:

[Mythli]

To ease some pain: The react tap plugin was just updated to v1.0.0. It only works with react > 15. In order to use version 1 you need to update your react as well otherwise tabs will not work.

[jakeboone02]

And if upgrading to React 15 is not an option at this time, depending on [email protected] should work.