Material-ui: Slider onChangeCommitted fires on mouseenter

[cdcasey]

When after moving the Slider, my handler for onChangeCommitted fires as expected. If I move the mouse cursor outside of the browser window and then back in, it fires again.

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

The onChangeCommitted handler should not fire on mouseenter.

Current Behavior 😯

It does.

Steps to Reproduce 🕹

Link: https://codesandbox.io/s/create-react-app-vnp10

1. Open up the console
2. Move the slider some
3. Move the mouse out of and back into the window and over the slider
4. See the console log message

Context 🔦

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | v4.1.1 |
| Material-UI Labs | v4.0.0-alpha.16 |
| React | 16.8.6 |
| Firefox Dev | 68.0b10 |
| Chrome | 74.0.3729.108 |

[oliviertassinari]

@cdcasey Thank you for reporting the problem. I believe the fix is as simple as:

diff --git a/packages/material-ui-lab/src/Slider/Slider.js b/packages/material-ui-lab/src/Slider/Slider.js
index 9fde8f282..6e1e708a1 100644
--- a/packages/material-ui-lab/src/Slider/Slider.js
+++ b/packages/material-ui-lab/src/Slider/Slider.js
@@ -533,6 +533,7 @@ const Slider = React.forwardRef(function Slider(props, ref) {
     touchId.current = undefined;
     document.body.removeEventListener('mousemove', handleTouchMove);
     document.body.removeEventListener('mouseup', handleTouchEnd);
+    document.body.removeEventListener('mouseenter', handleMouseEnter);
     document.body.removeEventListener('touchmove', handleTouchMove);
     document.body.removeEventListener('touchend', handleTouchEnd);
   });

Do you want to submit a pull request? :) We would love to review it.

[cdcasey]

Will do!