Repository: mui/material-ui (TypeScript)
Date: 2019-06-15 16:22:31+00:00
Task type: Bug Fix

Issue:
[TouchRipple] Buggy interaction with draggable HTML attribute
<!--- Provide a general summary of the issue in the Title above -->

When the "draggable" HTML attribute is added to a component that has a TouchRipple, when subsequent drags occur that end inside of the TouchRipple area, the opacity will multiply.

![touchRippleBugGif](https://user-images.githubusercontent.com/39515204/59517940-fbc16300-8ec4-11e9-814b-3abcd23b1dfb.gif)

Note that the only thing that is changed in the code from the Tabs demo is that the "draggable" attribute is added to the container div.

I was able to reproduce the same effect with the AppBar demo menu icon and I encountered the issue with the ButtonBase component also.

<!--
    Thank you very much for contributing to Material-UI by creating an issue! ❤️
    To avoid duplicate issues we ask you to check off the following list.
-->

<!-- Checked checkbox should look like this: [x] -->
- [x ] This is not a v0.x issue. <!-- (v0.x is no longer maintained) -->
- [x ] I have searched the [issues](https://github.com/mui-org/material-ui/issues) of this repository and believe that this is not a duplicate.

## Your Environment 🌎
<!---
    Include as many relevant details about the environment with which you experienced the bug.
    If you encounter issues with typescript please include version and tsconfig.
-->

| Tech         | Version |
|--------------|---------|
| Material-UI  | Reproduced on 4.0.0 and whichever version the current demos are on.  |
| React        |   16.8.6 and demo version   |
| Browser      |   Chrome/Demo      |
| TypeScript   |   -      |
| etc.         |         |



Issue discussion:
Can you provide a minimal reproducible example? I would have expected this to be fixed in #16142 (v4.1.1)

Edit: I was able to reproduce it.
@joshwooding How do we reproduce? Is this a Windows platform thing?
@oliviertassinari https://codesandbox.io/s/f4pxl Click and drag a Tab multiple times fairly quickly
@joshwooding Thanks!

I would propose the following fix:
```diff
diff --git a/packages/material-ui/src/ButtonBase/ButtonBase.js b/packages/material-ui/src/ButtonBase/ButtonBase.js
index 9d72485ad..b662fb99f 100644
--- a/packages/material-ui/src/ButtonBase/ButtonBase.js
+++ b/packages/material-ui/src/ButtonBase/ButtonBase.js
@@ -92,7 +92,7 @@ const ButtonBase = React.forwardRef(function ButtonBase(props, ref) {
     onTouchEnd,
     onTouchMove,
     onTouchStart,
-    onDragEnd,
+    onDragLeave,
     tabIndex = 0,
     TouchRippleProps,
     type = 'button',
@@ -146,7 +146,7 @@ const ButtonBase = React.forwardRef(function ButtonBase(props, ref) {
   }

   const handleMouseDown = useRippleHandler('start', onMouseDown);
-  const handleDragEnd = useRippleHandler('stop', onDragEnd);
+  const handleDragLeave = useRippleHandler('stop', onDragLeave);
   const handleMouseUp = useRippleHandler('stop', onMouseUp);
   const handleMouseLeave = useRippleHandler('stop', event => {
     if (focusVisible) {
@@ -284,7 +284,7 @@ const ButtonBase = React.forwardRef(function ButtonBase(props, ref) {
       onMouseDown={handleMouseDown}
       onMouseLeave={handleMouseLeave}
       onMouseUp={handleMouseUp}
-      onDragEnd={handleDragEnd}
+      onDragLeave={handleDragLeave}
       onTouchEnd={handleTouchEnd}
       onTouchMove={handleTouchMove}
       onTouchStart={handleTouchStart}
@@ -382,7 +382,7 @@ ButtonBase.propTypes = {
   /**
    * @ignore
    */
-  onDragEnd: PropTypes.func,
+  onDragLeave: PropTypes.func,
   /**
    * @ignore
    */
```

@LukasMirbt Do you want to submit a pull request? :)
@oliviertassinari I'm on it! :D

Solution patch:
diff --git a/packages/material-ui/src/ButtonBase/ButtonBase.js b/packages/material-ui/src/ButtonBase/ButtonBase.js
--- a/packages/material-ui/src/ButtonBase/ButtonBase.js
+++ b/packages/material-ui/src/ButtonBase/ButtonBase.js
@@ -92,7 +92,7 @@ const ButtonBase = React.forwardRef(function ButtonBase(props, ref) {
     onTouchEnd,
     onTouchMove,
     onTouchStart,
-    onDragEnd,
+    onDragLeave,
     tabIndex = 0,
     TouchRippleProps,
     type = 'button',
@@ -146,7 +146,7 @@ const ButtonBase = React.forwardRef(function ButtonBase(props, ref) {
   }
 
   const handleMouseDown = useRippleHandler('start', onMouseDown);
-  const handleDragEnd = useRippleHandler('stop', onDragEnd);
+  const handleDragLeave = useRippleHandler('stop', onDragLeave);
   const handleMouseUp = useRippleHandler('stop', onMouseUp);
   const handleMouseLeave = useRippleHandler('stop', event => {
     if (focusVisible) {
@@ -284,7 +284,7 @@ const ButtonBase = React.forwardRef(function ButtonBase(props, ref) {
       onMouseDown={handleMouseDown}
       onMouseLeave={handleMouseLeave}
       onMouseUp={handleMouseUp}
-      onDragEnd={handleDragEnd}
+      onDragLeave={handleDragLeave}
       onTouchEnd={handleTouchEnd}
       onTouchMove={handleTouchMove}
       onTouchStart={handleTouchStart}
@@ -382,7 +382,7 @@ ButtonBase.propTypes = {
   /**
    * @ignore
    */
-  onDragEnd: PropTypes.func,
+  onDragLeave: PropTypes.func,
   /**
    * @ignore
    */


Test patch:
diff --git a/packages/material-ui/src/ButtonBase/ButtonBase.test.js b/packages/material-ui/src/ButtonBase/ButtonBase.test.js
--- a/packages/material-ui/src/ButtonBase/ButtonBase.test.js
+++ b/packages/material-ui/src/ButtonBase/ButtonBase.test.js
@@ -248,7 +248,7 @@ describe('<ButtonBase />', () => {
 
       it('should stop the ripple when dragging has finished', () => {
         act(() => {
-          wrapper.simulate('dragEnd');
+          wrapper.simulate('dragLeave');
         });
         wrapper.update();