Material-ui: [ButtonBase] Ripple Effect is duplicated when dragging an image

[runewake2]

• [x] This is a v1.x issue (v0.x is no longer maintained).
• [x] 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 |

[oliviertassinari]

@runewake2 The ripple disappear as soon as your mouse leaves the button base. I think that we are good here.

[oliviertassinari]

Plus the onMouseUp event doesn't trigger when dragging the image. I'm not sure we can do anything about it.

[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.

[runewake2]

You're right, it does seem to pop the effects off one at a time if you mouse over repeatedly. Would it be possible to remove all the effects when removing the mouse so mousing over once removed all the left behind effects?

[oliviertassinari]

@runewake2 I have found two workarounds, non I think that worth taking the risk to be moved into the core. I'm keeping it here documented. In the future, we can revisit the tradeoff.

  <ButtonBase
    onDragStart={event => {
      // Workaround 1    
      event.preventDefault();
    }}
  >
    <img
      style={{
        // Workaround 2
        pointerEvents: "none"
      }}
      src="https://i.ytimg.com/vi/GRnALgoI8-4/hqdefault.jpg"
    />
  </ButtonBase>

[oliviertassinari]

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