Ripple effect in React

[tmonte]

The ripple effect in the CSS/JS version looks really nice, but it is different than the react version. If you click on the React buttons, it doesn't propagate all the way to the end of the button, whereas the CSS/JS version does. Is there a reason for it?
Thanks!

[amorey]

No, it should be the same. Thanks for pointing out the issue! It might have to do with this line here which removes the ripple element when the touch event ends:
https://github.com/muicss/mui/blob/master/src/react/button.jsx#L84-L90

I can look into this later but if you have time to look at it sooner that would be great.

[tmonte]

Hi @amorey I looked for a bit at that code and I don't think it is a problem with the onTouchEnd. I think the animation stops at onMouseUp, so we loose the ripple effect there. Since I'm not very familiar with the rest of the code, here's a pretty barebones solution I came up with that may help: https://codesandbox.io/s/wmjNx9Rw1
Thanks

[amorey]

Thanks! Your solution gave me some ideas on how to fix the issue. I should have a bugfix rolled out soon.

[amorey]

@tmonte Thanks again for creating this Github issue and for helping to debug it. I think you're right that the root cause was onMouseUp() stopping the animation by removing the mui--is-animating class in the render() method. To fix this issue I moved the ripple class logic to the componentDidUpdate() method:
https://github.com/muicss/mui/blob/master/src/react/button.jsx#L128-L150

The new code has been merged into the master and is deployed in the new version of MUI (v0.9.19). Let me know if you notice any other problems!

https://www.muicss.com/docs/v1/react/buttons
https://www.npmjs.com/package/muicss