[Rating] [email protected] bug when readOnly and precision is float number

[michael-land]

• 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 rating components displayed when readOnly and precision is floating point number

https://codesandbox.io/s/interesting-voice-pfguk

Expected Behavior 🤔

Display single rating component

Steps to Reproduce 🕹

https://codesandbox.io/s/interesting-voice-pfguk

Context 🔦

Your Environment 🌎

Tech	Version
Material-UI	v4.9.0
React	latest
Browser	chrome
TypeScript	latest
etc.

[oliviertassinari]

Oops, it's a regression from #19103. The best fix I can think of is:

diff --git a/packages/material-ui-lab/src/Rating/Rating.js b/packages/material-ui-lab/src/Rating/Rating.js
index 2089fd521..f8a94ebce 100644
--- a/packages/material-ui-lab/src/Rating/Rating.js
+++ b/packages/material-ui-lab/src/Rating/Rating.js
@@ -352,7 +352,7 @@ const Rating = React.forwardRef(function Rating(props, ref) {
     );

     if (readOnly) {
-      return <React.Fragment key={state.value}>{container}</React.Fragment>;
+      return <span key={state.value} {...labelProps}>{container}</span>;
     }

     return (

We would also need a visual test to avoid this regression in the future, something like this:

diff --git a/docs/src/pages/components/rating/HalfRating.tsx b/docs/src/pages/components/rating/HalfRating.tsx
index 3beeb8f18..c3c8f30d9 100644
--- a/docs/src/pages/components/rating/HalfRating.tsx
+++ b/docs/src/pages/components/rating/HalfRating.tsx
@@ -2,5 +2,10 @@ import React from 'react';
 import Rating from '@material-ui/lab/Rating';

 export default function HalfRating() {
-  return <Rating name="half-rating" defaultValue={2.5} precision={0.5} />;
+  return (
+    <div>
+      <Rating name="half-rating" defaultValue={2.5} precision={0.5} />
+      <Rating name="half-rating-read-only" defaultValue={2.5} precision={0.5} readOnly />
+    </div>
+  );
 }

Does anyone want to look into it?

[TommyJackson85]

@oliviertassinari I will look into it. I might ask for guidance if I am stuck.