Material-ui: How to get Tabs work?

[leordex]

I inserted Tabs code into my component. OK, Tabs displayed on page but second tab remains inactive and I can't set it active.
Where I'm not right?

Tabs code:
<div className="authorization">
<Tabs>
<Tab label="Авторизация">
{login}
</Tab>
<Tab label="Регистрация">
{register}
</Tab>
</Tabs>
</div>

[yapcheahshen]

you need to do this:
var injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin();

or add this to createElement("div") properties
onClick:this.handleTouchTap
in material-ui/lib/js/tabs/tab.js line 30 (inside render)

[drublic]

@leordex Did this fix your bug? Tabs for for me in the current version. Would be awesome if you could check and close this issue if it's not needed anymore.

[hai-cea]

Closing for now - @leordex please reopen if this is still an issue.

[That-David-Guy]

Adding the following worked for me (as per @yapcheahshen suggestion):

var injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin();

It would be good to mention it in the component/tabs documentation as I had the same issue.

[ghost]

Material UI Tabs are still not working, please commit a fix.

[maltazor]

With the react-tap-event-plugin the tabs are working fine for me.

[rubencodes]

Can't seem to get this to work myself :( Included the inject lines at the very start of the project, assuming they don't need to be in every file that uses material-ui? Everything renders fine, click events show up, it's just not calling the onChange handler on click... Using react 15 rc-2.

Update: seems like possible known issue with React 15 rc's.

[calbertts]

I'm having this issue right now.. is there a fix for it?

[blackChef]

Note that if you are using React 0.14 or lower, you need to use an older version
$ npm i --save [email protected]

Just for your information.

[chengjianhua]

@blackChef your solution helps me a lot ! I have been involved in this problem a morning. Thank you!

[dreamershl]

just share some interesting finding. in fact, you can use the "disabled" attribute in the Tab to control the disable/enable as the following... it just works :)

<Tab label='LOGIN' value="login">
                    {loginTab}
</Tab>
<Tab label='REGISTER' value="register" disabled={true}>
                    {registerTab}
</Tab>

[activatedgeek]

@dreamershi That is not documented. Should I be worried? Else there is no way to prevent the switching.

[dreamershl]

@activatedgeek I believe it should be OK because the component from library just pass down the props to the underlying component and "disabled" is the standard attributes of react.

[iesta]

I cannot get the Tabs to work... I have tried the "react-tap-event-plugin" but nothing.
Any idea? I use

  "dependencies": {
    "axios": "^0.12.0",
    "material-ui": "^0.15.1",
    "react": "^0.14.7",
    "react-dom": "15.1.0",
    "react-router": "^2.5.0",
    "react-tap-event-plugin": "^1.0.0"
  },

[activatedgeek]

@iesta Are you sure you have injected the tap-event plugin before your components get mounted? It works for me pretty well without any hassle.

Here is little example of what I have done (using react-router, you can replace react-router completely with some other component which renders):

import React from 'react';
import { render } from 'react-dom';

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

import IndexRoute from 'react-router/lib/IndexRoute';
import Route from 'react-router/lib/Route';
import Router from 'react-router/lib/Router';
import browserHistory from 'react-router/lib/browserHistory';

import Blank from './components/site/Blank';
// this component has the Tab/Tabs component
import Page from './components/site/Page';

render((
  <Router history={browserHistory}>
    <Route path="/" component={Blank}>
      <IndexRoute component={Page} />
    </Route>
  </Router>
), document.getElementById('main'));

[iesta]

Still not working. I have tried many different things...

import React from 'react'
import ReactDOM from 'react-dom'
import injectTapEventPlugin from 'react-tap-event-plugin'
injectTapEventPlugin()
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import {Routes} from './components/Routes'
import style from './css/main.less'

ReactDOM.render(
    <MuiThemeProvider>
    <Routes/>
    </MuiThemeProvider>,
    document.getElementById('app')
)

import React from 'react'
import { Router, Route, Link, browserHistory, hashHistory, history } from 'react-router'
import Stores from './Stores'
import Store from './Store'
import Operation from './Operation'
import OperationEdit from './OperationEdit'
import About from './About'
import NoMatch from './NoMatch'

export const Routes = () => (
    <Router history={hashHistory}>
        <Route name="Lc" path="/" component={Stores}/>
        <Route name="Store" path="/store/:id" component={Store}/>
        <Route name="Operation" path="/operation/:id" component={Operation} />
        <Route name="Operation Edit" path="/operation/:id/edit" component={OperationEdit}/>
        <Route name="About" path="/about" component={About}/>
        <Route name="404: No Match for route" path="*" component={NoMatch}/>
    </Router>
);

Tabs are in OperationEdit

[iesta]

But I have this error:
Uncaught TypeError: Cannot use 'in' operator to search for 'pageX' in

[amiteshrai]

Can't get Tabs to work. Here is my dependency list

"react": "^15.3.2",
"react-tap-event-plugin": "^2.0.1",
"react-virtualized": "^7.11.5",
"redux": "^3.6.0",

And here is the code snippet

<Row style={{marginTop: '1%'}}>
  <Col md={8} lg={8} mdOffset={1} lgOffset={1}>
    <Tabs value={selectedTab} onChange={(v) => this.handleTabSelection(v)}>
      <Tab label={tab.label} value={tab.value} key={tab.value}
          onActive={(tab) => function (tab) { console.log(tab.props) }}>
          <h4>Tab Form Goes Here</h4>
      </Tab>
    </Tabs>
  </Col>
</Row>

Note : injectTapEventPlugin is already invoked in my root component

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

Can anybody give me any workaround how to get this to work