[data grid] range styling is being added to cells inside of the range instead of just the edges of the range

[RyleySill93]

Steps to reproduce

Link to live example: https://mui.com/x/react-data-grid/cell-selection/#customize-range-styling

Current behavior

MuiDataGrid-cell--rangeBottom is being applied to a cell in the middle of the range.

Expected behavior

MuiDataGrid-cell--rangeBottom should only be applied to cells in the last row of the range.

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: datagrid range styling
Order ID: 75803

[michelengelen]

Hey @RyleySill93 could you provide detailed steps you took to get to this bug?
If I try it is always correct:

Thanks! 🙇🏼

[RyleySill93]

@michelengelen I'm just clicking on that link and highlighting a range of cells using click and drag or shift + arrow keys. Tried with Chrome, Safari, and Firefox

test.mov

[michelengelen]

Oh, yes ... now I can reproduce as well ... it happens with all of the range classes.
Thanks for raising this issue. 🙇🏼 We will have a look.

[gitstart]

@michelengelen @RyleySill93 we would like to pick this up

[louisaaron]

We're experiencing this as well and are planning to roll out our grid-based feature in the next two weeks. @michelengelen are you able to provide an estimated timeline for this one? If beyond 2-3 weeks we'll probably go ahead and create our own internal fix. Thanks so much!

Support Key/Order ID: 85118

[romgrk]

Which grid version will you be using? Can you use the v7 releases? This should be straightforward to fix this week.

[github-actions]

⚠️ This issue has been closed.
If you have a similar problem, please open a new issue and provide details about your specific problem.
If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @RyleySill93?
Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.

[louisaaron]

Thanks guys!