Material-ui: Warning: Unknown prop `onTouchTap` on <button> tag

[TheImpressionist]

Problem description

Warning: Unknown proponTouchTapon <button> tag

Happens when I try to render out the AppBar. Haven't tried with other elements.

I have read older issues, it was said that this issue would be resolved in version 15.2, but as of the most recent version 15.4, the problem still appears to exist.

Steps to reproduce

'use strict';

import * as React from 'react';
import AppBar from 'material-ui/AppBar';

class Header extends React.Component<any, any> {
  doSomething() {
    console.log('Click Event fired');
  }

  render() {
    return (
      <AppBar
        title='Title'
        onLeftIconButtonTouchTap={this.doSomething}
      />
    );
  }
}

export default Header;

Versions

• Material-UI: 0.15.4
• React: 15.3.1
• Browser: Chrome: Version 52.0.2743.116 (64-bit)

[TheImpressionist]

Solution:

'use strict';

import * as React from 'react';
import AppBar from 'material-ui/AppBar';
import * as injectTapEventPlugin from 'react-tap-event-plugin';


class Header extends React.Component<any, any> {
  constructor(props: any) {
    injectTapEventPlugin();
    super(props);
  }

  doSomething() {
    console.log('Click Event fired');
  }

  render() {
    return (
      <AppBar
        title='Title'
        onLeftIconButtonTouchTap={this.doSomething}
      />
    );
  }
}

export default Header;

[minas1]

Does not work for me.
I even tried injecting it just after the import (as other answers in other threads suggest) but no luck.

"material-ui": "^0.16.1",
"react": "^15.3.2",
"react-dom": "^15.3.2",

[ankitduseja]

This issue should be re-opened.

[lucasbento]

@minas1, @ankitduseja: can you please provide a running code snippet to reproduce the issues that you are facing?

[ankitduseja]

@lucasbento I'm using react-boilerplate latest build from here: https://github.com/mxstbr/react-boilerplate/

App.js

import React from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Header from 'components/Header';
import injectTapEventPlugin from 'react-tap-event-plugin';

export default class App extends React.Component {
  constructor(props) {
    super(props)
    injectTapEventPlugin();
  }
  static propTypes = {
    children: React.PropTypes.node,
  };

  render() {
    return (
      <MuiThemeProvider>
        <div>
          <Header />
          {React.Children.toArray(this.props.children)}
        </div>
      </MuiThemeProvider>
    );
  }
}

and

/**
* Header
*/
import React from 'react';
import AppBar from 'material-ui/AppBar';

function Header() {
  return (
    <div>
      <AppBar
        title="Header Bar"
        iconClassNameRight="muidocs-icon-navigation-expand-more"
      />
    </div>
  );
}
export default Header;

In console I get this error:

warning.js:36 Warning: Unknown prop `onTouchTap` on <button> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in button (created by EnhancedButton)
    in EnhancedButton (created by IconButton)
    in IconButton (created by AppBar)
    in div (created by Paper)
    in Paper (created by AppBar)
    in AppBar (created by Header)
    in div (created by Header)
    in Header (created by App)
    in div (created by App)
    in MuiThemeProvider (created by App)
    in App (created by RouterContext)
    in RouterContext (created by Router)
    in ScrollBehaviorContext (created by Router)
    in Router
    in IntlProvider (created by LanguageProvider)
    in LanguageProvider (created by Connect(LanguageProvider))
    in Connect(LanguageProvider)
    in Provider

[minas1]

Ah sorry, I have found the issue some time ago but forgot to answer here.

It seems that for some reason I was including React and ReactDOM in index.html (from node_modules) but also had it in package.json as a dependency.

  <script src="./node_modules/react/dist/react.js"></script>
  <script src="./node_modules/react-dom/dist/react-dom.js"></script>

I removed the two lines above from index.html and also these lines from my webpack configuration file:
externals: { "react": "React", "react-dom": "ReactDOM" }

[lucasbento]

@ankitduseja: please try adding the injectTapEventPlugin() outside of the component or before super() call.

[cainlevy]

@minas1 has the answer, i believe, for folks who have been baffled why injectTapEventPlugin() does not seem to work in any location.

[rosskevin]

As @minas1 alludes to, this seems to be caused by more than one inclusion of react-dom.

To solve this double inclusion with webpack, you can use alias (note we also use this for react and react-relay to prevent problems with a deep set of libraries):

  resolve: {
    alias: {
      'react': '/project/acme/node_modules/react',
      'react-dom': '/project/acme/node_modules/react-dom',
      'react-relay': '/project/acme/node_modules/react-relay',
    }
  }