Material-ui: React 15.0.2 "Unknown props onTouchTap" warnings

[sayanchowdhury]

Even though last release fixed a couple of issues. I am still seeing this two warnings

Warning: Unknown prop `onTouchTap` on <span> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in span (created by EnhancedButton)
    in EnhancedButton (created by ListItem)
    in div (created by ListItem)
    in ListItem (created by ChatMenu)
    in div (created by List)
    in List (created by _class)
    in _class (created by ChatMenu)
    in div (created by Paper)
    in Paper (created by Drawer)
    in div (created by Drawer)
    in Drawer (created by ChatMenu)
    in ChatMenu (created by ChatApp)
    in div (created by ChatApp)
    in ChatApp (created by Chat)
    in MuiThemeProvider (created by Chat)
    in Chat (created by WithWidth)
    in EventListener (created by WithWidth)
    in WithWidth (created by RouterContext)
    in RouterContext (created by Router)
    in Router (created by Root)
    in e (created by Root)
    in Provider (created by Root)

Warning: Unknown prop `styles` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by Paper)
    in Paper (created by AppBar)
    in AppBar (created by ChatRoom)
    in div (created by ChatRoom)
    in ChatRoom (created by ChatApp)
    in div (created by ChatApp)
    in ChatApp (created by Chat)
    in MuiThemeProvider (created by Chat)
    in Chat (created by WithWidth)
    in EventListener (created by WithWidth)
    in WithWidth (created by RouterContext)
    in RouterContext (created by Router)
    in Router (created by Root)
    in e (created by Root)
    in Provider (created by Root)

[sayanchowdhury]

I would like to send a PR but right now I don't know how to test the changes and if those changes fixes the warning ?

[tavurth]

Using Yeoman Webpack and react: ^15.2.1

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 RaisedButton)
    in div (created by Paper)
    in Paper (created by RaisedButton)
    in RaisedButton (created by MyButton)
    in div (created by MyButton)
    in MyButton (created by AppComponent)
    in div (created by AppComponent)
    in MuiThemeProvider (created by AppComponent)
    in AppComponent

From the simple:

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';

export default class MyButton extends React.Component {

  render() {
    return (
      <div>
        <RaisedButton>
          Hello, world!
        </RaisedButton>

      </div>
    );
  }
}

Packages.json:

{
  ...
  "devDependencies": {
    ...
    "core-js": "^2.0.0",
    "material-ui": "^0.15.2",
    "normalize.css": "^4.0.0",
    "react": "^15.2.1",
    "react-dom": "^15.0.0",
    "react-tap-event-plugin": "^1.0.0"
  }
}

[tavurth]

Fixed by adding:

// Needed for onTouchTap
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

To the component.

[BlockChange]

I'd like to add: transitionAppearTimeout

warning.js:44 Warning: Unknown prop `transitionAppearTimeout` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by ReactTransitionGroup)
    in ReactTransitionGroup (created by DialogInline)
    in div (created by DialogInline)
    in DialogInline
    in MuiThemeProvider

Only appears in Dialog

Update: Nevermind, that was with react 15.0.0, with 15.2.1 its gone. I guess they forgot a few props.

[igl]

I call injectTapEventPlugin() in both client and server and still get plenty of warnings with various elements.

Versions:

"material-ui": "0.15.2",
"react": "15.2.1",
"react-dom": "15.2.1",
"react-tap-event-plugin": "1.0.0",

Some Warnings:

Warning: Unknown prop `onTouchTap` on <label> tag. 
Warning: Unknown props `displayBorder`, `columnNumber`, `hoverable`, `onHover`, `onHoverExit` on <td> tag.

[ixrock]

@igl try to call injectTapEventPlugin() before ReactDOM.render

[Ghirigoro]

@ixrock: calling injectTapEventPlugin() before ReactDOM.render does not fix the issue (at least not for me)

[vaspoz]

@Ghirigoro the same issue =\

vendors.js:20314 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 RaisedButton)
    in div (created by Paper)
    in Paper (created by RaisedButton)
    in RaisedButton
    in MuiThemeProvider

regardless of using/not using injectTapEventPlugin() before/after render. Any ideas, guys?

[azamatsmith]

Added the suggestion by @tavurth and I got rid of the error.
I tried it in the following places with success:

• In the component generating the error
• routes file
• app.js file
• file where ReactDOM.render is being called

I settled on placing it in the ReactDOM.render file

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

[tathagatbanerjee]

Seeing same error on CardTitle with prop titleStyle...

warning.js:44 Warning: Unknown prop `titleStyle` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by CardTitle)
    in CardTitle (created by GroupAdmin)
    in div (created by Card)
    in div (created by Paper)
    in Paper (created by Card)
    in Card (created by GroupAdmin)
    in span (created by GroupAdmin)
    in GroupAdmin (created by Operations)

Code fragment: <CardTitle title="Group Admin" titleStyle={styles.title}/>

Material UI version: 0.15.2

Thanks so much.

[johnstew]

Hi there,

Not sure if mine is related but I get this error when using <Chip>.

Unknown prop labelColor on <div> tag.

[jurgob]

I have the same warning. After some debugging I have discovered that it is raised from this code:

const MenuLeftItem =
  ({text,url}) =>
    <ListItem
      className="menuleft-module-item"
      primaryText={text}
    />

and

<AppBar
   title="Admin Panel"
   iconElementLeft={
      <IconButton>
         <NavigationClose />
      </IconButton>
    }
     onClick={onCollapse}
  />

this is my package.json

"dependencies": {
    "brace": "^0.8.0",
    "d3": "^4.2.2",
    "deepmerge": "^0.2.10",
    "dom-value": "^1.0.1",
    "form-controls": "^1.0.0",
    "form-parse": "^0.1.0",
    "form-urlencoded": "^1.2.1",
    "formsy-material-ui": "^0.5.0",
    "formsy-react": "^0.18.1",
    "is-submittable": "^1.0.0",
    "isomorphic-fetch": "^2.2.1",
    "js-beautify": "^1.5.10",
    "lodash": "^4.14.1",
    "material-ui": "^0.15.4",
    "muicss": "^0.7.3",
    "query-string": "^4.2.2",
    "radium": "^0.18.1",
    "rd3": "^0.7.1",
    "react": "^15.3.1",
    "react-ace": "^3.1.0",
    "react-diff": "0.0.6",
    "react-dimensions": "^2.0.0-alpha1",
    "react-dom": "^15.3.1",
    "react-edit-inline": "^1.0.6",
    "react-graph-vis": "0.0.3",
    "react-hotkeys": "^0.9.0",
    "react-modal": "^1.4.0",
    "react-notification": "^6.1.0",
    "react-redux": "^4.0.6",
    "react-router": "^2.6.1",
    "react-syntax-highlighter": "^2.0.3",
    "react-tap-event-plugin": "^1.0.0",
    "reactable": "^0.14.0",
    "recompose": "^0.20.0",
    "reduce": "^1.0.1",
    "redux": "^3.0.6",
    "redux-actions": "^0.11.0",
    "redux-localstorage": "^0.4.0",
    "redux-saga": "^0.11.0",
    "redux-thunk": "^2.1.0",
    "reduxerit": "^0.4.1",
    "reselect": "^2.0.3",
    "sha1": "^1.1.1",
    "sleep-promise": "^2.0.0",
    "squares": "^0.2.1",
    "uuid": "^2.0.2",
    "vis": "^4.16.1"
  }
}

[igl]

adding injectTapEventPlugin() did not fix it for me.
i suspect it has something to do with the react HMR plugin

[mattyork]

I fixed this problem by switching from using the UMD version of react to webpack-ing everything. I suspect this fixes it because some combo of react-tap-event-plugin and material-ui needs to reach into the private internals of React, and it can't do this from the UMD version. Sigh...

[darkowic]

I have same warning for Overlay

Warning: Unknown prop `onTouchTap` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by Overlay)
    in Overlay (created by DialogInline)
    in div (created by DialogInline)
    in DialogInline

Also I've read here https://github.com/facebook/react/issues/436 that react-tap-event-plugin possibly may be removed since react 15. Need to investigate.

[oliviertassinari]

I'm closing this issue as root issue has been identified by @tavurth. Thanks!

We rely on the react-tap-event-plugin to add the onTouchTap property.
Actually, I'm glad that React added this warning. That's gonna help a lot of people that miss this point from the documentation.

Going forward, we plan to remove this dependency in the next branch.
We use the onClick event as modern mobile devices better support it (no delay).

[surajadh]

I was using AppBar and here is the code I am using to fix this as per comments above:

const Header = React.createClass({
handleClick(e){
console.log("reached here::");
},
render(){
injectTapEventPlugin();
return <AppBar title="Some Heading" onTitleTouchTap={this.handleClick()}/>
}
});

export default Header;

[jakewins]

For those like me who found this issue, applied the fixes, and had the problem persist: The suggested approach of running injectTapEventPlugin() only works if you are using WebPack; I changed my app over to webpack from browserify, made no other changes to the code, and the error went away.

[oychao]

Could anyone tell me what injectTapEventPlugin() is here for please?

[weiss19ja]

@jakewins: I hade the same issue with browserify. The problem was that I am building a vendor.js and one js file with my whole client code. I found out, that the react-event-tap-plugin have to be bundled within the js file where your react lib is in. This approach fixed my problem with browserify.

[vans163]

Same issue. @vaspoz

Seems to be related to the react-tap-event-plugin going up to ^2.0.0 and react hitting 15.4.0. I am using UMD build and calling injectTapEventPlugin before ReactDOM.render.

Using a non UMD build is unfortunately not an option.

Does anyone have a working UMD version combination of react + react-tap-event-plugin + material-ui?

@oliviertassinari Would it be stable enough to use the next branch which has the more native onClick? I do not care if many things are broken, as long as its semi usable.

[oliviertassinari]

Would it be stable enough to use the next branch which has the more native onClick?

@vans163 Here is a 1 month-year-old version of the next branch: http://material-ui-next.azurewebsites.net/. It depends on what you mean by stable.
The API is going to change if we need to. Only some components have been migrated, and often partially. Still, I'm migrating my app to use 100% this branch.

[rdnewman]

Just in case it helps someone until the new release is ready: I ran into this issue, but once I moved the

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

lines to the component file where I apply <MuiThemeProvider> in the component hierarchy, it started working. (It is also where I do my mapStateToProps for redux but I assume that's irrelevant.) I had previously applied them in the file for a higher component that acted as my wrapping component.

I'm using an ejected webpack from create-app-react.

[GregTheGreek]

@rdnewman This works!!

Thank you so much!

[ptim]

thanks all... I had this warning in tests only, and then realised that injectTapEventPlugin() was not called in the course of testing components, only in the full blown app

[Lavioli]

@rdnewman , thank you! your method works. I put it in my index.js file where it contained the ReactDOM.render method file and it also worked that way. 👍

[willklein]

I had this come up using create-react-app this past week. React came in at 15.4.x and this error happens despite calling injectTapEventPlugin() appropriately. This is discussed in react-tap-event-plugin #85. Manually saving/installing react-tap-event-plugin at 2.0.0 resolved this for me.

[grishgrigoryan]

hope to help someone who use typescript
I am using material-ui with typescript and had the same issue.
After adding
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
code before ReactDOM.render it throws error.

Uncaught TypeError: react_tap_event_plugin_1.default is not a function

it was solved by changing import style
import * as injectTapEventPlugin from 'react-tap-event-plugin';

[erick2014]

Thank god, these days I just have to install the react-tap-event-plugin version 2.0.1 and react 15.4.2, then I went to the file where I render app, and just include these two lines:

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

And that's it 👍

[mbrookes]

@erick2014 Yup: http://www.material-ui.com/#/get-started/installation

[mschipperheyn]

Frustratingly vague issue. Came back after I did some code reorganization in a SSR scenario

[cjnahine05]

For "react": "15.4.2",

Use "react-tap-event-plugin": "^2.0.0" or react-tap-event-plugin": "^2.0.1"

and add this
// Needed for onTouchTap

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

[windrpha]

Importing and adding injectTapEventPlugin() solved my issue.

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

componentWillMount(){
    injectTapEventPlugin();
    }

[jesmarquez]

Im using Next.JS

This solution do not work, i have a file tap_events.js it is import each page.

My file tap_events.js:
import injectTapEventPlugin from 'react-tap-event-plugin'
if (typeof window !== 'undefined') injectTapEventPlugin()