[Tabs] Dependency on react-tap-event-plugin

[rileybracken]

This isn't in the documentation but there is a dependency on react-tap-event-plugin. I could not get tabs to work without it.

I tried copying and pasting the exact code in the docs and it still didn't work.

So I used this before creating the class #288:

import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

Now the tabs work but the ink bar still does not move when clicked.

I am using React 0.14.3 and Material-ui 0.14.3

Here is the full component

import React, { Component, PropTypes } from 'react';
import { browserHistory } from 'react-router';
import injectTapEventPlugin from 'react-tap-event-plugin';
import Tabs from 'material-ui/lib/tabs/tabs';
import Tab from 'material-ui/lib/tabs/tab';

injectTapEventPlugin();

function onTabClick(tab) {
  browserHistory.push(tab.props.route)
}

class TestTabs extends Component {
  static propTypes = {
    children: PropTypes.object.isRequired,
  };

  render() {
    return (
      <div>
        <Tabs
          inkBarStyle={{ backgroundColor: '#ffffff' }}
          tabItemContainerStyle={{ backgroundColor: '#425896', margin: '-25px 0 0 0' }}
        >
          <Tab route='/student-information/events' label='Events' onActive={ onTabClick }></Tab>
          <Tab route='/student-information/deals' label='Deals' onActive={ onTabClick }></Tab>
          <Tab route='/student-information/exams' label='Exams' onActive={ onTabClick }></Tab>
          <Tab route='/student-information/places' label='Places' onActive={ onTabClick }></Tab>
        </Tabs>

        { this.props.children }
      </div>
    );
  }
}

export default TestTabs;

[mbrookes]

It is documented but we hope to be able to remove it from the docs soon: #3079.

[rileybracken]

@mbrookes Ah, I did read that when I first started a few days ago and completely spaced it. Thanks.

Is there any obvious reason why the ink bar is not moving?

[ghost]

this is still no fixed! the material-ui tabs dont work

[newoga]

@MaxArrowhead

Did you add this to your code like it says here?

import injectTapEventPlugin from 'react-tap-event-plugin';

// Needed for onTouchTap
// Can go away when react 1.0 release
// Check this repo:
// https://github.com/zilverline/react-tap-event-plugin
injectTapEventPlugin();

If you did and are still having problems, feel free to open a new issue. 😄