[DateRangePicker] Dates jiggle when hovering over spacing fillers in first or last row

[paulleonartcalvo]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When hovering over date spacing fillers in first or last row, the rest of the day/week containers jitter, shifting slightly, which causes an undesired side effect to hovering over the picker.

Expected behavior 🤔

When hovering over the calendar, dates should not jitter around within the container. They should stay in position.

Steps to reproduce 🕹

Link to live example:

Steps:

1. Set up a date range picker with a localization provider which uses 2 input fields
2. Click into a input field such that the date range picker appears
3. Hover over the first or last row empty spaces

Here is a sandbox showing the behavior

Context 🔦

I want to use the date range picker with 2 inputs, each containing either the start or end date. This is the same situation used in the Mui-X docs for basic date range picker usage. I've attempted to target the styles causing the problem and have had little success with overrides, but the event that causes the shifting is clear. The on hover event on the empty spaces adds a 1px border, shifting content downstream. I'm not sure what the 'correct' way to fix the problem is but thats where i would start looking

Your environment 🌎

npx @mui/envinfo

   Browser used: Chrome
  System:
    OS: macOS 12.5.1
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.14.0 - ~/.nvm/versions/node/v16.14.0/bin/npm
  Browsers:
    Chrome: 106.0.5249.103
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.6.1

Order ID 💳 (optional)

42126

[LukasTy]

@paulleonartcalvo Thank you for opening this issue.
We've failed to notice the same issue appears on v5 as well.
@alexfauquette Do you think we should cherry-pick your fix into master?

[alexfauquette]

I copied the fix on master, just need the verify ti fixes the bug on the doc preview

[LukasTy]

I copied the fix on master, just need the verify ti fixes the bug on the doc preview

Just a reminder—at least for me—the issue is not visible in our doc.
Only isolated usages (i.e. playground, codesandbox) allows reproduction.

[paulleonartcalvo]

@LukasTy Yes, i found that odd as well, which is why i was hesitant to make this issue at first. Regardless, thank you all very much for getting a fix in so quickly!