React-dom 15.4.1 "Unknown props onTouchTap" warnings make all click events not work

[jiehwa]

Problem description

when react&react-dom update to version 15.4.1 。。all click events do'nt work, even use injectTapEventPlugin,but is ok when react@15.3.2

so please settle this problem as soon as possible!

if done ,email me jiehwa@qq.com

Link to minimally-working code that reproduces the issue

Versions

• Material-UI:
• React:react 15.4.1
• Browser:chrome

[hmeerlo]

@jiehwa You do realize this is an open source project and people develop this on a voluntary basis?

But besides this, I experience the exact same problem. I can not figure out what the source of the problem is yet.

[Janaka-Steph]

You need to add : // Needed for onTouchTap import injectTapEventPlugin from 'react-tap-event-plugin'; injectTapEventPlugin();

[hmeerlo]

Sorry, I did have that already (I was upgrading react and material-ui), but somehow one of the packages was on the incorrect version. So my bad!

[kylecannon]

For what it's worth, I had react-tap-event-plugin imported and had the same issue. I ensured I had the latest version of react-tap-event-plugin and when i moved to react 15.4.x from 15.3.x it broke the onTouchTap

[jkzing]

I've experienced same issue like guys above. All react, react-dom, material-ui and react-tap-event-plugin are in the latest version.

[jkzing]

Turns out react-tap-event-plugin version ^2.0.0 is compatible with React >= 15.4, upgrade it fix my issue.

[MarwanEB]

@JingkaiZhao It works

[wartertall]

I have same issue, I use react-tap-event-plugin version 2.0.1, material-ui 0.16.5, react 15.4.0, even try with react 15.4.1 but no luck. Warning "Unknown prop onTouchTap" show and all click events don't work. Ps: I have call injectTapEventPlugin at begining of app.

[vans163]

Same issue but with react-tap-event-plugin version 2.0.1 and react 15.3.2.

[wartertall]

It work for now. I don't know where make error. I use react-boilerplate. But when I disable DLL Plugin, onTouchTap work and no warning message come.

[bmcdaniel11]

I was having the same issue using react 15.4.1 and react-tap-event-plugin 2.0.1. Reverted back to 15.3.2 and 1.0.0 and everything worked.

@vans163 react-tap-event-plugin version 2.0.1 states it will break anything react < 15.4.0, so I wouldn't expect that to work

[patrickml]

any updates on this? Would like to update react, but being held back @15.3.2 still

[attilaaronnagy]

super annoying, really huge bug. I don't know how can anybody use this with react < 15.4.0. just had to downgrade all of our project to 15.3.1. PLEASE! Solve this! No click event works, on none of the components!

[rosskevin]

I have run the docs site using react react@15.4.2 and both react-tap-event-plugin@2.0.0 and react-tap-event-plugin@2.0.1. Both worked.

I'm submitting a PR to raise the minimal version for react-tap-event-plugin to be 2.0.1, it was a bit lenient previously (which would fail with react 15.4), so hopefully raising the restriction exposes any other conflicts that were previously hidden. The react version will be raised to 15.4 as well.

[rosskevin]

Investigating...

Date picker, select, and autocomplete fields are exhibiting this in our app, and we have confirmed correct versions 15.4.2 and 2.0.1.

[rosskevin]

master is failing to run tests on OSX, while circleci says it's all good.

npm ls react-tap-event-plugin react                                                                                                                                                       ⏎ tap-event-plugin-min-version
material-ui-build@0.16.7 /Users/kross/projects/material-ui
├── react@15.4.2 
└── react-tap-event-plugin@2.0.1

I'm going to push a PR with a small circle.yml change so we can definitively see what versions are running on that platform and compare against local results. Circle uses cached node_modules so this may be a difference.

[rosskevin]

In the PR #6090 - it shows that circleci succeeds with a variety of versions, while the same versions on OSX fail with:

  1) <DropDownMenu /> focus handling should open the menu when users interact:
     TypeError: Argument is NaN
      at Object.conversions.unrestricted double (node_modules/webidl-conversions/lib/index.js:110:15)
      at HTMLDivElement.set [as scrollTop] (node_modules/jsdom/lib/jsdom/living/generated/Element.js:496:43)
      at Menu.setScollPosition (src/Menu/Menu.js:450:7)
      at Menu.componentDidMount (src/Menu/Menu.js:197:10)
      at node_modules/react-dom/lib/ReactCompositeComponent.js:265:25
      at measureLifeCyclePerf (node_modules/react-dom/lib/ReactCompositeComponent.js:75:12)
      at node_modules/react-dom/lib/ReactCompositeComponent.js:264:11
      at CallbackQueue.notifyAll (node_modules/react-dom/lib/CallbackQueue.js:76:22)
      at ReactReconcileTransaction.close (node_modules/react-dom/lib/ReactReconcileTransaction.js:80:26)
      at ReactReconcileTransaction.closeAll (node_modules/react-dom/lib/Transaction.js:206:25)

  2) <Menu /> onMenuItemFocusChange is invoked when using the arrow key to go down to the bottom and back up to the top:
     TypeError: Argument is NaN
      at Object.conversions.unrestricted double (node_modules/webidl-conversions/lib/index.js:110:15)
      at HTMLDivElement.set [as scrollTop] (node_modules/jsdom/lib/jsdom/living/generated/Element.js:496:43)
      at Menu.setScollPosition (src/Menu/Menu.js:450:7)
      at Menu.componentDidMount (src/Menu/Menu.js:197:10)
      at node_modules/react-dom/lib/ReactCompositeComponent.js:265:25
      at measureLifeCyclePerf (node_modules/react-dom/lib/ReactCompositeComponent.js:75:12)
      at node_modules/react-dom/lib/ReactCompositeComponent.js:264:11
      at CallbackQueue.notifyAll (node_modules/react-dom/lib/CallbackQueue.js:76:22)
      at ReactReconcileTransaction.close (node_modules/react-dom/lib/ReactReconcileTransaction.js:80:26)
      at ReactReconcileTransaction.closeAll (node_modules/react-dom/lib/Transaction.js:206:25)

  3) <Menu /> onMenuItemFocusChange is invoked for hotkeys:
     TypeError: Argument is NaN
      at Object.conversions.unrestricted double (node_modules/webidl-conversions/lib/index.js:110:15)
      at HTMLDivElement.set [as scrollTop] (node_modules/jsdom/lib/jsdom/living/generated/Element.js:496:43)
      at Menu.setScollPosition (src/Menu/Menu.js:450:7)
      at Menu.componentDidMount (src/Menu/Menu.js:197:10)
      at node_modules/react-dom/lib/ReactCompositeComponent.js:265:25
      at measureLifeCyclePerf (node_modules/react-dom/lib/ReactCompositeComponent.js:75:12)
      at node_modules/react-dom/lib/ReactCompositeComponent.js:264:11
      at CallbackQueue.notifyAll (node_modules/react-dom/lib/CallbackQueue.js:76:22)
      at ReactReconcileTransaction.close (node_modules/react-dom/lib/ReactReconcileTransaction.js:80:26)
      at ReactReconcileTransaction.closeAll (node_modules/react-dom/lib/Transaction.js:206:25)

I'm not quite sure yet what this means, but it seems related.

@oliviertassinari or @mbrookes - do you have any thoughts on this?

[rosskevin]

We have solved this problem with our application - it appears to be a problem with double 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',
    }
  }

@related https://github.com/callemall/material-ui/issues/5208#issuecomment-286550083

[oliviertassinari]

@rosskevin Thanks for letting us know.