diff --git a/packages/mui-material/src/Rating/Rating.js b/packages/mui-material/src/Rating/Rating.js
index d6b5f761603982..6efc9854dbe823 100644
--- a/packages/mui-material/src/Rating/Rating.js
+++ b/packages/mui-material/src/Rating/Rating.js
@@ -404,9 +404,17 @@ const Rating = React.forwardRef(function Rating(inProps, ref) {
       percent = (event.clientX - left) / containerWidth;
     }
 
+    setFocusVisible(false);
+
     let newHover = roundValueToPrecision(max * percent + precision / 2, precision);
     newHover = clamp(newHover, precision, max);
 
+    if (Number.isNaN(newHover)) {
+      // Workaround for test scenario using userEvent since jsdom defaults getBoundingClientRect to 0
+      // Fix https://github.com/mui/material-ui/issues/38828
+      return;
+    }
+
     setState((prev) =>
       prev.hover === newHover && prev.focus === newHover
         ? prev
@@ -416,8 +424,6 @@ const Rating = React.forwardRef(function Rating(inProps, ref) {
           },
     );
 
-    setFocusVisible(false);
-
     if (onChangeActive && hover !== newHover) {
       onChangeActive(event, newHover);
     }
diff --git a/packages/mui-material/src/Rating/Rating.test.js b/packages/mui-material/src/Rating/Rating.test.js
index 7c84b7e72ce4fb..175e5cca98757c 100644
--- a/packages/mui-material/src/Rating/Rating.test.js
+++ b/packages/mui-material/src/Rating/Rating.test.js
@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { stub, spy } from 'sinon';
-import { act, createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
+import { act, createRenderer, fireEvent, screen, waitFor } from '@mui/internal-test-utils';
 import Rating, { ratingClasses as classes } from '@mui/material/Rating';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
+import userEvent from '@testing-library/user-event';
 import describeConformance from '../../test/describeConformance';
 
 describe('<Rating />', () => {
@@ -121,6 +122,23 @@ describe('<Rating />', () => {
     expect(checked.value).to.equal('2');
   });
 
+  it('should select the rating with user clicks', async () => {
+    const user = userEvent.setup();
+    const handleChange = spy();
+
+    const { container } = render(<Rating name="rating-test" onChange={handleChange} />);
+
+    await user.click(screen.getByLabelText('2 Stars'));
+
+    await waitFor(() => {
+      expect(handleChange.callCount).to.equal(1);
+      expect(handleChange.args[0][1]).to.equal(2);
+
+      const checked = container.querySelector('input[name="rating-test"]:checked');
+      expect(checked.value).to.equal('2');
+    });
+  });
+
   it('should change the value to null', () => {
     const handleChange = spy();
     render(<Rating name="rating-test" onChange={handleChange} value={2} />);