[material-ui][Rating] Fix the hover highlighting for spaced icons (#3…

…9775)
mui · Nov 8, 2023 · aff59c2 · aff59c2
1 parent efcdf73
commit aff59c2
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 6 deletions.
diff --git a/packages/mui-material/src/Rating/Rating.js b/packages/mui-material/src/Rating/Rating.js
@@ -367,14 +367,14 @@ const Rating = React.forwardRef(function Rating(inProps, ref) {
     }
 
     const rootNode = rootRef.current;
-    const { right, left } = rootNode.getBoundingClientRect();
-    const { width } = rootNode.firstChild.getBoundingClientRect();
+    const { right, left, width: containerWidth } = rootNode.getBoundingClientRect();
+
     let percent;
 
     if (theme.direction === 'rtl') {
-      percent = (right - event.clientX) / (width * max);
+      percent = (right - event.clientX) / containerWidth;
     } else {
-      percent = (event.clientX - left) / (width * max);
+      percent = (event.clientX - left) / containerWidth;
     }
 
     let newHover = roundValueToPrecision(max * percent + precision / 2, precision);

diff --git a/packages/mui-material/src/Rating/Rating.test.js b/packages/mui-material/src/Rating/Rating.test.js
@@ -46,18 +46,62 @@ describe('<Rating />', () => {
     stub(container.firstChild, 'getBoundingClientRect').callsFake(() => ({
       left: 0,
       right: 100,
+      width: 100,
     }));
-    stub(container.firstChild.firstChild, 'getBoundingClientRect').callsFake(() => ({
-      width: 20,
+    fireEvent.mouseMove(container.firstChild, {
+      clientX: 19,
+    });
+    expect(container.querySelectorAll(`.${classes.iconHover}`).length).to.equal(1);
+    fireEvent.mouseMove(container.firstChild, {
+      clientX: 21,
+    });
+    expect(container.querySelectorAll(`.${classes.iconHover}`).length).to.equal(2);
+  });
+
+  it('should handle mouse hover correctly for icons with spacing', () => {
+    const { container } = render(
+      <Rating
+        sx={{
+          [`.${classes.decimal}`]: { marginRight: 2 },
+        }}
+        precision={0.5}
+      />,
+    );
+    stub(container.firstChild, 'getBoundingClientRect').callsFake(() => ({
+      left: 0,
+      right: 200,
+      width: 200,
     }));
+
     fireEvent.mouseMove(container.firstChild, {
       clientX: 19,
     });
+    // half star highlighted
     expect(container.querySelectorAll(`.${classes.iconHover}`).length).to.equal(1);
+
     fireEvent.mouseMove(container.firstChild, {
       clientX: 21,
     });
+    // one full star highlighted
+    expect(container.querySelectorAll(`.${classes.iconHover}`).length).to.equal(2);
+
+    fireEvent.mouseMove(container.firstChild, {
+      clientX: 39,
+    });
+    // Still one star remains highlighted as the total item width (40px) has not been reached yet, considering 24px for the icon width and 16px for margin-right.
     expect(container.querySelectorAll(`.${classes.iconHover}`).length).to.equal(2);
+
+    fireEvent.mouseMove(container.firstChild, {
+      clientX: 41,
+    });
+    // one and half star highlighted
+    expect(container.querySelectorAll(`.${classes.iconHover}`).length).to.equal(3);
+
+    fireEvent.mouseMove(container.firstChild, {
+      clientX: 60,
+    });
+    // two full stars highlighted
+    expect(container.querySelectorAll(`.${classes.iconHover}`).length).to.equal(4);
   });
 
   it('should clear the rating', () => {