Not triggering click event the first time when used with material-ui

[zsxsoft]

The bug can reproduce with Chrome and Edge, works fine in Firefox. Also, anujs(https://github.com/RubyLouvre/anu, another React-like library) and React works fine.

User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3192.0 Safari/537.36

User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16251

Example: https://lucifier129.github.io/material-ui/build/#/

In Chrome, I have to double-click a MenuItem to trigger its onClick event with react-lite.

I found the source of bug: https://github.com/callemall/material-ui/blob/master/src/internal/TouchRipple.js#L210. I replaced the rippleGroup to <div />, the issue still exists.

      rippleGroup = (
-       <ReactTransitionGroup style={prepareStyles(mergedStyles)}>
-         {ripples}
-       </ReactTransitionGroup>
+       <div />
      );
    }

Then I tried to debug react-lite. The first click didn't trigger click event.

So I wrapped dispatchEvent with setTimeout to wait 65ms, now the click triggered normally. Delaying batchUpdate is useless.

I think it's maybe any function canceled mouseup event, but there're no function controlled event.

Now I have no clue...

[zsxsoft]

So fucking exciting.
node_modules/material-ui/internal/TouchRipple.js, L260,

if (hasRipples)

to

if (true)

It will works correctly!!! But damn it, hasRipples is always true when I click on it, wtf happened???????

[Lucifier129]

Intersting, haha~