[ButtonBase] Ripple Effect is duplicated when dragging an image

• This is a v1.x issue (v0.x is no longer maintained).
• I have searched the issues of this repository and believe that this is not a duplicate. (The issue seems similar to #7537)

Expected Behavior

After the mouse click has released and the animation completed the ripple effect should dissapear.

Current Behavior

Currently if a Button exists with an Image inside of it, clicking and moving the mouse causes the image to be selected. On Chrome (both Firefox and Microsoft Edge do not have this behavior) based browsers this is preventing the ripple from being removed afterwards. If this is done only once this only slightly highlights the button and is removed after another click. However, if multiple drags are done on the same button all but the last ripple remain indefinitely.

In my application this is the code that produces this error.

              <ButtonBase>
                <img
                  src='https://i.ytimg.com/vi/GRnALgoI8-4/hqdefault.jpg'/>
              </ButtonBase>

Example here

Steps to Reproduce (for bugs)

1. Create a button with an image inside of it
2. Click on the button
3. Before releasing the mouse click and drag (Chrome will display the dragged image icon)
4. Release the mouse, the ripple effect remains.
5. Repeat 2-4 to make the effect deeper.

Your Environment

Tech	Version
Material-UI	v1.2.0
React	v16.2.0
browser	Vivaldi 1.10.867.38 and Google Chrome 66.0.3359.181
etc	Windows 10 64bit, build 17134.48

[mbrookes]

@runewake2 Try a few small click-drags within the ButtonBase one after the next. Then, each time you mouseover, one layer of ripple will be removed.

[oliviertassinari]

A solution was found in https://github.com/mui-org/material-ui/issues/15937#issuecomment-499848759.