Material-ui: [Tabs] and containerElement with Link click issue

Created on 15 Apr 2016 · 11Comments · Source: mui-org/material-ui

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)

bug 🐛 Tabs

Source

EloB

👍2

Most helpful comment

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;

EloB on 1 Jun 2016

👍2

All 11 comments

@EloB Please provide the issue template

nathanmarks on 15 Apr 2016

https://jsfiddle.net/f71rn79a/

tablink

EloB on 15 Apr 2016

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. https://github.com/reactjs/react-router/issues/1795
So I wonder how we could fix this 😄

EloB on 26 Apr 2016

👍1

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

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

mbrookes on 5 May 2016

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

Create a folder
Run npm install the packages you need
Create a index.js file fill template below
Run browserify on that index.js file
Publish that file to a cdn
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 on 9 May 2016

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 on 11 May 2016

👍2

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;

EloB on 1 Jun 2016

👍2

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