javascript - Why has material-UI Tabs stopped working?

Question

Material UI Tabs has stopped working... It must have been after an update as it's not working at all now. It could have been caused by the recent update to react-tap-event-plugin I made. Initially, I thought it was because of my tab indexing but it doesn't work with the a,b,c values too e.g. value='a', value='b', etc.

I have even tried it with a stripped out version as a clean new component like so:

//imports
//'use strict';
import * as React from 'react';
import { Button, PrimaryButton, IButtonProps } from 'office-ui-fabric-react';
//import styles from './Npmsharepoint2.module.scss';
//import styles from './AZ.module.scss';
import { IAZProps } from './IAZProps';
import { escape } from '@microsoft/sp-lodash-subset';
var striptags = require('striptags');
//Routing/networking
import {
  SPHttpClient,
  SPHttpClientResponse,
  ISPHttpClientOptions    
} from '@microsoft/sp-http';
import * as ReactDom from 'react-dom';
import { IListItem } from './IListItem';
//Icons
import RaisedButton from 'material-ui/RaisedButton';
import {MdCancel, 
    MdChat, MdCheck, 
    MdAddBox, 
    MdHourglassFull,
    MdDone, MdHome} from 'react-icons/lib/md'
import FaIconPack from 'react-icons/lib/fa'
import TiIconPack from 'react-icons/lib/ti'
import {Tabs, Tab} from 'material-ui/Tabs';

import {
  Table,
  TableBody,
  TableHeader,
  TableHeaderColumn,
  TableRow,
  TableRowColumn,
} from 'material-ui/Table';
import Image from 'material-ui-image';
//import { storiesOf, action } from '@kadira/storybook';

//Tried this:
// since the export is a function, this is the only actual correct way:
import injectTapEventPluginRequire = require("react-tap-event-plugin");

//And this too!!:
//import * as injectTapEventPluginExport from 'react-tap-event-plugin';
//const injectTapEventPlugin = (injectTapEventPluginExport as any).default;
injectTapEventPluginRequire();


import { IAZRedxFormControllerProps } from './IAZRedxFormControllerProps';
import { IAZRedxFormControllerState } from './IAZRedxFormControllerState';
import AZRedxForm from './AZRedxForm';
import AZRedxList from './AZRedxList';


const data = ['Alexandre', 'Thomas', 'Lucien']
const cardCompstyles = {
  headline: {
    fontSize: 24,
    paddingTop: 16,
    marginBottom: 12,
    fontWeight: 400,
  },
  slide: {
    padding: 10,
  },
  largeIcon: {
    width: 60,
    height: 60,
  },
};

// From https://github.com/oliviertassinari/react-swipeable-views
import SwipeableViews from 'react-swipeable-views';

const styles = {
  headline: {
    fontSize: 24,
    paddingTop: 16,
    marginBottom: 12,
    fontWeight: 400,
  },
  slide: {
    padding: 10,
  },
};

export interface CardCompTestState {
    slideIndex: number;
  }

  export interface IAZRedxFormControllerTestProps {
    title: string;
    description: string;
    listName: string;
    //pollService: IPollService;
  }

  export default class AZCardTest extends React.Component<IAZRedxFormControllerTestProps, CardCompTestState> {
    constructor(props: IAZRedxFormControllerTestProps) {
      super(props);
      this.state = {
        slideIndex: 0
      };
    }

  handleChange = (value) => {
    this.setState({
      slideIndex: value,
    });
  };

  render() {
    return (
      <div>
        <Tabs
          onChange={this.handleChange}
          value={this.state.slideIndex}
        >
          <Tab label="Tab One" value={0} />
          <Tab label="Tab Two" value={1} />
          <Tab label="Tab Three" value={2} />
        </Tabs>
        <SwipeableViews
          index={this.state.slideIndex}
          onChangeIndex={this.handleChange}
        >
          <div>
            <h2 style={styles.headline}>Tabs with slide effect</h2>
            Swipe to see the next slide.<br />
          </div>
          <div style={styles.slide}>
            slide n°2
          </div>
          <div style={styles.slide}>
            slide n°3
          </div>
        </SwipeableViews>
      </div>
    );
  }
}

My versionings:

{
  "name": "npmsharepoint",
  "version": "0.0.1",
  "private": true,
  "engines": {
    "node": ">=0.10.0"
  },
  "scripts": {
    "build": "browserify -t [ babelify --presets [ react ] ] src/app/scripts/main.js -o src/scripts/app.js",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {
    "@microsoft/sp-core-library": "~1.1.0",
    "@microsoft/sp-lodash-subset": "~1.1.0",
    "@microsoft/sp-office-ui-fabric-core": "~1.4.0-0",
    "@microsoft/sp-webpart-base": "~1.1.0",
    "@types/jquery": "^2.0.48",
    "@types/jqueryui": "https://registry.npmjs.org/@types/jqueryui/-/jqueryui-1.11.37.tgz",
    "@types/react": "0.14.46",
    "@types/react-addons-shallow-compare": "0.14.17",
    "@types/react-addons-test-utils": "0.14.15",
    "@types/react-addons-update": "0.14.14",
    "@types/react-dom": "0.14.18",
    "@types/webpack-env": ">=1.12.1 <1.14.0",
    "babel-preset-react": "^6.24.1",
    "babelify": "^8.0.0",
    "bootstrap": "^4.0.0-beta.2",
    "browser-router": "^0.2.0",
    "jquery": "^2.2.4",
    "jqueryui": "https://registry.npmjs.org/jqueryui/-/jqueryui-1.11.1.tgz",
    "material-ui-image": "^2.1.1",
    "prop-types": "^15.6.0",
    "react": "15.4.2",
    "react-autosuggest": "^9.3.2",
    "react-bootstrap": "^0.31.5",
    "react-bootstrap-table": "^4.3.1",
    "material-ui": "^0.16.0",
    "react-dom": "15.4.2",
    "react-icons": "^2.2.7",
    "react-responsive-modal": "^2.0.0",
    "react-select": "^1.1.0",
    "react-swipe-card": "^0.1.4",
    "react-swipe-views": "0.0.12",
    "react-swipeable-views": "^0.12.12",
    "reactstrap": "^5.0.0-alpha.4",
    "sp-pnp-js": "^3.0.3"
  },
  "devDependencies": {
    "@microsoft/sp-build-web": "~1.1.0",
    "@microsoft/sp-module-interfaces": "~1.1.0",
    "@microsoft/sp-webpart-workbench": "~1.1.0",
    "style-loader": "^0.18.2",
    "css-loader": "^0.28.6",
    "@types/chai": ">=3.4.34 <3.6.0",
    "@types/material-ui": "^0.20.0",
    "@types/mocha": ">=2.2.33 <2.6.0",
    "@types/react-tap-event-plugin": "0.0.30",
    "ajv": "~5.2.2",
    "gulp": "~3.9.1"
  }
}

Answer 1

Based off of your latest comments it seems like your handleChange that's doing setState is the culprit.

Based off of the latest docs for material-ui you could try:

handleChange = (event, value) => {
  this.setState({
    slideIndex: value,
  });
};

Looks like you might be trying to use the entire event object instead of the value. (you could also just use the event but do this.setState({slideIndex: event.target.value}) probably.