[Rating] Half star ratings don't register events correctly on latest Chrome

[luisrudge]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

I can't select the 'full star' rating when enabling half star ratings:

ratings.mp4

If half stars are NOT enabled, then it works just fine:

ratings-ok.mp4

Expected behavior 🤔

I should be able to select a full star when rating precision is enabled

Steps to reproduce 🕹

Steps:

1. Go to the website with latest chrome
2. Try to rate any 'full star'

Context 🔦

No response

Your environment 🌎

Microsoft Edge: Version 101.0.1210.32 (Official build) (arm64)
Google Chrome: Version 101.0.4951.41 (Official Build) (arm64)

[luisrudge]

I found the issue, but I'm not sure what the fix implicates, since there's a comment regarding another bug. If I remove the pointer-events: none style in here, it works as expected.

My code fix is to set a style in my icon to override that:

<Rating
  max={1}
  icon={<ClearRoundedIcon style={{ pointerEvents: "auto" }} />}
  defaultValue={0}
/>

[ZeeshanTamboli]

I can't select the 'full star' rating when enabling half star ratings:

I can also reproduce it in Google Chrome in Version 101.0.4951.54 (Official Build) (64-bit).
I had checked earlier and it worked before in Version 100.

It works in Firefox version 100.0

[mkhib]

I have the same issue. Cannot select full star in Brave browser [Version 1.38.111 Chromium: 101.0.4951.54 (Official Build) (64-bit)] if precision={0.5}.
Works in Firefox version 100.0.
Component also has problem in the MUI website MUI Rating Docs

[boutahlilsoufiane]

Hi @ZeeshanTamboli, I will work on this!

[notsidney]

I found the issue, but I'm not sure what the fix implicates, since there's a comment regarding another bug. If I remove the pointer-events: none style in here, it works as expected.

My code fix is to set a style in my icon to override that:

<Rating
  max={1}
  icon={<ClearRoundedIcon style={{ pointerEvents: "auto" }} />}
  defaultValue={0}
/>

And here’s a version with the sx prop so you don’t have to override the icon components:

sx={{ "& .MuiSvgIcon-root": { pointerEvents: "auto" } }}

[boutahlilsoufiane]

Hi @ZeeshanTamboli, could you please review the PR, thanks a lot for your time!

[ZeeshanTamboli]

Closing this as it works now in Google Chrome and Firefox on latest release v5.8.7.