[Rating] Component hover state gets stuck

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Multiple Star components are rendered on-screen. Hovering without clicking seems to make some of them stay highlighted.

Expected Behavior 🤔

Should not be filled in unless clicked.

Steps to Reproduce 🕹

<DialogContent>
                  {ScoreNames.map((name, idx) => {
                    return (
                      <div key={idx}>
                        <div
                          className={clsx(classes.scoreName, {
                            [classes.validationError]:
                            submitCount > 0 && errors[name]
                          })}
                        >
                          {t("score-" + name)}
                        </div>
                        <StyledRating
                          name={name}
                          value={parseInt(values[name])}
                          onChange={handleChange}
                          disabled={isSubmitting}
                          size={"medium"}
                          max={10}
                          emptyIcon={<StarBorderIcon fontSize="inherit"/>}
                        />
                      </div>
                    );
                  })}

Context 🔦

Just trying to give people a way to leave ratings…

Your Environment 🌎

I’m using them in a dialog.

Tech	Version
Material-UI	v4.8.0
Material-labs	v4.0.0 alpha 36
React	v16.12.0
Browser	chrome
TypeScript	nope
etc.

[fyodore82]

I’ll do the pull request

[oliviertassinari]

Hum, I wonder if we don’t have a performance issue that originates on this problem, however, the pointer event proposal seems to fix the problem 😃.

diff --git a/packages/material-ui-lab/src/Rating/Rating.js b/packages/material-ui-lab/src/Rating/Rating.js
index d454c2481e..a5108473f6 100644
--- a/packages/material-ui-lab/src/Rating/Rating.js
+++ b/packages/material-ui-lab/src/Rating/Rating.js
@@ -92,6 +92,9 @@ export const styles = theme => ({
     transition: theme.transitions.create('transform', {
       duration: theme.transitions.duration.shortest,
     }),
+    // Fix mouseLeave issue.
+    // https://github.com/facebook/react/issues/4492
+    pointerEvents: 'none',
   },
   /* Styles applied to the icon wrapping elements when empty. */
   iconEmpty: {

Does anyone want to work on a pull request? 😃