[DateRangePicker] Fix currentMonthCalendarPosition prop behavior on…

… mobile
mui · Feb 4, 2025 · 3bb8560 · 3bb8560
1 parent b252b9a
commit 3bb8560
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 1 deletion.
diff --git a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx
@@ -57,6 +57,8 @@ const MobileDateRangePicker = React.forwardRef(function MobileDateRangePicker<
     format: utils.formats.keyboardDate,
     // Force one calendar on mobile to avoid layout issues
     calendars: 1,
+    // force current calendar position, since we only have one calendar
+    currentMonthCalendarPosition: 1,
     views: ['day'] as const,
     openTo: 'day' as const,
     slots: {

diff --git a/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/MobileDateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/MobileDateRangePicker.test.tsx
@@ -13,7 +13,7 @@ import { DateRange } from '@mui/x-date-pickers-pro/models';
 import { PickerValidDate } from '@mui/x-date-pickers/models';
 import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
 
-describe('<MobileDateRangePicker />', () => {
+describe.only('<MobileDateRangePicker />', () => {
   const { render } = createPickerRenderer({ clock: 'fake' });
 
   describe('Field slot: SingleInputDateRangeField', () => {
@@ -291,6 +291,22 @@ describe('<MobileDateRangePicker />', () => {
     });
   });
 
+  it('should ignore "currentMonthCalendarPosition" prop value and have expected selection behavior', () => {
+    render(
+      <MobileDateRangePicker
+        currentMonthCalendarPosition={2}
+        open
+        referenceDate={adapterToUse.date('2022-04-17')}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('gridcell', { name: '3' }));
+    fireEvent.click(screen.getByRole('gridcell', { name: '5' }));
+
+    expect(screen.getByText('Apr 3')).not.to.equal(null);
+    expect(screen.getByText('Apr 5')).not.to.equal(null);
+  });
+
   // TODO: Write test
   // it('should call onClose and onAccept with the live value when clicking outside of the picker', () => {
   // })

diff --git a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx
@@ -149,6 +149,8 @@ const MobileDateTimeRangePicker = React.forwardRef(function MobileDateTimeRangeP
     calendars: 1,
     // force true to correctly handle `renderTimeViewClock` as a renderer
     ampmInClock: true,
+    // force current calendar position, since we only have one calendar
+    currentMonthCalendarPosition: 1,
     slots: {
       field: MultiInputDateTimeRangeField,
       ...defaultizedProps.slots,