[Tabs] and containerElement with Link click issue

[EloB]

Problem Description

Must double click on the tab else it won't show the new tab content. Works as expected in Chrome but not in Safari and Firefox.

Versions

• Material-UI: 0.14.4
• React: 0.14.8
• Browser: Chrome (works), Safari (broken), Firefox (broken)

[nathanmarks]

@EloB Please provide the issue template

[EloB]

https://jsfiddle.net/f71rn79a/

[EloB]

I think the problem is in react-router. The <Link /> doesn't use onTouchTap property. Made some small hacks to it and got it to work but react-router but they won't support react-tap-event-plugin. remix-run/react-router#1795
So I wonder how we could fix this 😄

[mbrookes]

@EloB - will onActive not work for your use case?

(Also what was your process to get that bundle? Neat!

[EloB]

@mbrookes Thanks! I've created a private webservice that I probably will publish soon but the process is pretty easy.

1. Create a folder
2. Run npm install the packages you need
3. Create a index.js file fill template below
4. Run browserify on that index.js file
5. Publish that file to a cdn
6. Import to jsfiddle, jsbin etc

Template

require('the');
require('package');
require('you');
require('need');
global.require = require;

Please create a lightweight jsfiddle template so people can fork and easier make bug reports and add that to contribute guide.

[EloB]

Here is my monkey patch workaround... In the initial file that bootstrap everything just import this snippet. This actually works but I would love to see a non monkey patch solution for this 😄

index.js

// The first thing that happends in your app
import './monkey-patch-link';

// Rest of your app code

monkey-patch-link.js

// Look in comment below

[EloB]

Updated monkey patch that does work with touch devices... Ugly but works perfect!

import React, { Component, PropTypes } from 'react';
const ReactRouter = require('react-router');
const { Link } = ReactRouter;

class MonkeyPatchLink extends Component {
  static contextTypes = {
    router: PropTypes.object,
  };
  static propTypes = {
    onTouchTap: PropTypes.func,
    onClick: PropTypes.func,
  };
  constructor(...args) {
    super(...args);

    this.handleTouchTap = this.handleTouchTap.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }
  handleTouchTap(e) {
    if (this.props.onTouchTap) {
      this.props.onTouchTap(e);
    }
    if ('button' in e.nativeEvent === false) {
      // If touch event
      e.nativeEvent.button = 0;
    }
    Link.prototype.handleClick.call(this, e.nativeEvent);
  }
  handleClick(e) {
    if (this.props.onClick) {
      this.props.onClick(e);
    }
    e.preventDefault();
  }
  render() {
    return (
      <Link {...this.props} onClick={this.handleClick} onTouchTap={this.handleTouchTap} />
    );
  }
}

ReactRouter.Link = MonkeyPatchLink;

[joncursi]

I'm running into this same issue on iOS with onTouchTap. Chrome does work great, however.

[kevinptt0323]

+1

[ynarwal]

I am using tab onActive and push the browser history according to tab.props.index not the best solution but works on every browser.

[oliviertassinari]

I'm closing that issue as quite old now. Hopefully the Tab component on the next branch is not longer affected by that issue.