[DateRangePicker] Fix calendar day outside of month layout shifting on hover

[alexfauquette]

When moving to the slot, the DateRangeDay is adding styles to empty grid cells which leads to some inconsistencies

Here is a record of the problem when moving the mouse hover the cell

hoverBug.mp4

The reason is that on hover the cell adds a 1px border. We do not see it because component are hidden, but it modifies the layout

[mui-bot]

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	471.7	886.8	708.4	666.82	168.095
Sort 100k rows	ms	525.7	980.7	867.2	778.66	170.372
Select 100k rows	ms	181.9	262.9	222.8	223.98	27.587
Deselect 100k rows	ms	125	203.8	189.8	178.94	28.528

Generated by 🚫 dangerJS against 85ad2f3

[flaviendelangle]

diff --git a/packages/x-date-pickers/src/PickersDay/PickersDay.tsx b/packages/x-date-pickers/src/PickersDay/PickersDay.tsx
index ea562295f..9191d61f4 100644
--- a/packages/x-date-pickers/src/PickersDay/PickersDay.tsx
+++ b/packages/x-date-pickers/src/PickersDay/PickersDay.tsx
@@ -184,6 +184,7 @@ const PickersDayFiller = styled('div', {
   ...styleArg({ theme, ownerState }),
   // visibility: 'hidden' does not work here as it hides the element from screen readers as well
   opacity: 0,
+  pointerEvents: 'none',
 }));

The following also fixes the problem, if you don't want the DateRangePickersDay to know why a day is hidden or not.

[LukasTy]

Is it still a problem?
I struggle to reproduce the issue on latest next 🤷

[alexfauquette]

I do not manage to reproduce it either. But Flavien's proposal makes sense even if the bug has been solved by an unknown commit.
Hidden element should not react to the pointer

[flaviendelangle]

I can still reproduce it on next with a DateRangeCalendar
I'll prepare a reproduction case if I have some time 👍

[alexfauquette]

I confirm I can reproduce it (and the PR solves the bug) with

import * as React from 'react';
import { DateRangeCalendar } from '@mui/x-date-pickers-pro/DateRangeCalendar';
import { LocalizationProvider } from '@mui/x-date-pickers-pro'
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs'

export default function PlaygroundExample() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DateRangeCalendar />
    </LocalizationProvider>
  );
}

Can not be done in codesandbox because DateRangeCalendar is not currently exported

[LukasTy]

Proposal for a PR title change:
[DateRangePicker] Fix calendar day outside of month layout shifting on hover