Material-ui: Console Error Message: Unknown prop `onTouchTap`

[joshjconlin]

Console is throwing this error:
Warning: Unknown prop onTouchTap on 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)

as far as i can tell that prop just needs to be removed from Enhanced Button

[Shahrukh-Zindani]

Can you post the code? I want to know the name of the tag in which you are trying to use the onTouchTap prop?

[joshjconlin]

The strange thing is that i'm never calling onTouchTap, its appearing when i call material-ui ListItem and also a slightly different version of the same thing when i call material-ui Dialog

VM230740:36 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


import React from 'react';
import MaterialDialog from 'material-ui/Dialog';
import * as definition from './definition';

export function Dialog(props) {
  return (
    <MaterialDialog {...props} />
  );
}

Dialog.propTypes = definition.propTypes;
Dialog.contextTypes = definition.contextTypes;
Dialog.defaultProps = definition.defaultProps;

import { PropTypes } from 'react';

export const propTypes = {
  actions: PropTypes.node,
  actionsContainerStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]),
  bodyStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]),
  contentStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]),
  children: PropTypes.node,
  modal: PropTypes.bool,
  onRequestClose: PropTypes.func,
  open: PropTypes.bool.isRequired,
  overlayStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]),
  style: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]),
  title: PropTypes.node,
  titleStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]),
  fullWidthActions: PropTypes.bool,
};

export const defaultProps = {
  modal: false,
  fullWidthActions: false,
};

export const contextTypes = {
  theme: PropTypes.object,
};

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 ListItem)
    in ListItem (created by ListItem)
    in ListItem (created by BookItem)
    in BookItem
    in div (created by Story)
    in div (created by Story)
    in Story
    in div (created by StoryBookLayout)
    in div (created by StoryBookLayout)
    in StoryBookLayout
    in Provider (created by Provider)
    in Provider
    in div (created by component)
    in component (created by RouterContext)
    in RouterContext (created by Router)
    in Router (created by RouterProvider)
    in RouterProvider
    in MuiThemeProvider (created by ThemeProvider)
    in ThemeProvider

import React from 'react';
import MaterialListItem from 'material-ui/List/ListItem';
import objectWithoutProps from '../../helpers/objectWithoutProps';
import * as definition from './definition';

export function ListItem(props) {
  const listItemProps = objectWithoutProps(props, ['leftButton', 'leftAvatar', 'rightButton', 'rightAvatar']);
  return (
    <MaterialListItem
      {...listItemProps}
      leftCheckbox={props.leftButton}
      leftIcon={props.leftAvatar}
      rightIcon={props.rightAvatar}
      rightToggle={props.rightButton}
    />
  );
}

ListItem.propTypes = definition.propTypes;
ListItem.contextTypes = definition.contextTypes;

import { PropTypes } from 'react';
import InternalButton from '../InternalButton';
import Avatar from '../Avatar';

export const propTypes = {
  style: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]),
  children: PropTypes.node,
  leftAvatar: PropTypes.object,
  leftButton: PropTypes.object,
  rightAvatar: PropTypes.object,
  rightButton: PropTypes.object,
  primaryText: PropTypes.node,
  secondaryText: PropTypes.node,
  disabled: PropTypes.bool,
};

export const contextTypes = {
  theme: PropTypes.object,
};

I've tried removing that prop myself at the level of my code, but it doesn't fix the error. I hope that helps. If you need more code or anything let me know

[Shahrukh-Zindani]

If you put your code between three back ticks followed by the word javascript and code on the next line and close it with three back ticks you can paste the code in a much neater way.

[mbrookes]

@joshjconlin I edited your comment.

@Shahrukh-Zindani you can also use ```js, which is a bit less verbose.

[joshjconlin]

thanks to both of you!

[oliviertassinari]

@joshjconlin Are you using react-tap-event-plugin ? (http://www.material-ui.com/#/get-started/installation)

[joshjconlin]

yes, i have installed that plugin, and it is working, its just those two specific areas where im running into issues

[sendlo]

It looks like version 0.17.0 in the repo has onTouchTap as a property of IconButton. But the 0.17.0 that is on npm doesn't have this property.

[oliviertassinari]

@sendlo Both support it. It's a matter of documentation. That propType was added recently and isn't released on npm yet.

[sendlo]

Ah. Got it. Thanks.

[NantawatS]

Any solution for the issues? I got the same error after update all packages.
"react": "15.4.2" "material-ui": "^0.17.0" "react-tap-event-plugin": "^2.0.1"

[sendlo]

You have to inject it into your app too. Its in the installation instructions, but I didn't catch it until after posting here.

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

// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();

[oliviertassinari]

I have seen this Unknown prop onTouchTap question so many times that I have lost the count, e.g. #5208.

I'm going to close the issue. If @sendlo solution isn't addressing the issue and you find what's going on please comment. Otherwise, we have removed that dependency with the next branch. We use tha native onClick event.