[Rating] Component hover state gets stuck

[mlake]

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

[mbrookes]

Please provide a CodeSandbox example that reproduces the problem (you can start with a docs demo); and ideally identify why you think it is a problem with the component.

[mlake]

Reproduction: https://codesandbox.io/s/material-demo-cek44
Using Chrome 79, move your cursor across the stars quickly.

It occurs only with emptyIcon={

Might be related to this:
facebook/react#4492

[mlake]

I can confirm that the following works for me:

<Rating emptyIcon={<StarBorderIcon fontSize="inherit" style={{pointerEvents: 'none'}} />}

[fyodor-e]

The Rating component depends on onMouseLeave event. onMouseLeave sets hover and focus variables that are used to show stars. And as mentioned in facebook/react#4492 `onMouseLeave sometimes not fired.

I may suggest to add pointerEvents: 'none' to icon style which is used to style span containing start SVG. With this change issue goes away.

[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? :)

[fyodor-e]

I'll do the pull request