diff --git a/packages/mui-material/src/Rating/Rating.js b/packages/mui-material/src/Rating/Rating.js index d6b5f761603982..92c7bfae070ef6 100644 --- a/packages/mui-material/src/Rating/Rating.js +++ b/packages/mui-material/src/Rating/Rating.js @@ -407,6 +407,12 @@ const Rating = React.forwardRef(function Rating(inProps, ref) { 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 + newHover = -1; + } + setState((prev) => prev.hover === newHover && prev.focus === newHover ? prev diff --git a/packages/mui-material/src/Rating/Rating.test.js b/packages/mui-material/src/Rating/Rating.test.js index 7c84b7e72ce4fb..d4334e14bc048d 100644 --- a/packages/mui-material/src/Rating/Rating.test.js +++ b/packages/mui-material/src/Rating/Rating.test.js @@ -4,6 +4,7 @@ import { stub, spy } from 'sinon'; import { act, createRenderer, fireEvent, screen } 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('', () => { @@ -121,6 +122,21 @@ describe('', () => { 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(); + + await user.click(screen.getByLabelText('2 Stars')); + + 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();