[DateTimeRangePicker] Fix selection on same day (#12604)

mui · Mar 29, 2024 · fdaafd1 · fdaafd1
1 parent 28da4ca
commit fdaafd1
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 3 deletions.
diff --git a/...date-pickers-pro/src/DesktopDateTimeRangePicker/tests/DesktopDateTimeRangePicker.test.tsx b/...date-pickers-pro/src/DesktopDateTimeRangePicker/tests/DesktopDateTimeRangePicker.test.tsx
@@ -1,7 +1,13 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { screen } from '@mui-internal/test-utils';
-import { createPickerRenderer, adapterToUse } from 'test/utils/pickers';
+import { screen, userEvent } from '@mui-internal/test-utils';
+import {
+  createPickerRenderer,
+  adapterToUse,
+  openPicker,
+  getFieldSectionsContainer,
+  expectFieldValueV7,
+} from 'test/utils/pickers';
 import { DesktopDateTimeRangePicker } from '../DesktopDateTimeRangePicker';
 
 describe('<DesktopDateTimeRangePicker />', () => {
@@ -10,6 +16,31 @@ describe('<DesktopDateTimeRangePicker />', () => {
     clockConfig: new Date(2018, 0, 10, 10, 16, 0),
   });
 
+  describe('value selection', () => {
+    it('should allow to select range within the same day', () => {
+      render(<DesktopDateTimeRangePicker enableAccessibleFieldDOMStructure />);
+
+      openPicker({ type: 'date-time-range', variant: 'desktop', initialFocus: 'start' });
+
+      // select start date range
+      userEvent.mousePress(screen.getByRole('gridcell', { name: '11' }));
+      userEvent.mousePress(screen.getByRole('option', { name: '4 hours' }));
+      userEvent.mousePress(screen.getByRole('option', { name: '5 minutes' }));
+      userEvent.mousePress(screen.getByRole('option', { name: 'PM' }));
+
+      // select end date range on the same day
+      userEvent.mousePress(screen.getByRole('gridcell', { name: '11' }));
+      userEvent.mousePress(screen.getByRole('option', { name: '5 hours' }));
+      userEvent.mousePress(screen.getByRole('option', { name: '10 minutes' }));
+      userEvent.mousePress(screen.getByRole('option', { name: 'PM' }));
+
+      const startSectionsContainer = getFieldSectionsContainer(0);
+      const endSectionsContainer = getFieldSectionsContainer(1);
+      expect(expectFieldValueV7(startSectionsContainer, '01/11/2018 04:05 PM'));
+      expect(expectFieldValueV7(endSectionsContainer, '01/11/2018 05:10 PM'));
+    });
+  });
+
   describe('disabled dates', () => {
     it('should respect the "disablePast" prop', () => {
       render(<DesktopDateTimeRangePicker enableAccessibleFieldDOMStructure disablePast open />);

diff --git a/packages/x-date-pickers-pro/src/internals/utils/date-range-manager.test.ts b/packages/x-date-pickers-pro/src/internals/utils/date-range-manager.test.ts
@@ -4,6 +4,7 @@ import { calculateRangeChange, calculateRangePreview } from './date-range-manage
 import { DateRange } from '../../models';
 
 const start2018 = adapterToUse.date('2018-01-01');
+const start2018At4PM = adapterToUse.date('2018-01-01T16:00:00');
 const mid2018 = adapterToUse.date('2018-07-01');
 const end2019 = adapterToUse.date('2019-01-01');
 
@@ -88,6 +89,14 @@ describe('date-range-manager', () => {
       allowRangeFlip: true,
       expectedNextSelection: 'end' as const,
     },
+    {
+      range: [start2018At4PM, null],
+      rangePosition: 'end' as const,
+      newDate: start2018,
+      expectedRange: [start2018At4PM, start2018],
+      allowRangeFlip: false,
+      expectedNextSelection: 'start' as const,
+    },
   ].forEach(
     ({ range, rangePosition, newDate, expectedRange, allowRangeFlip, expectedNextSelection }) => {
       it(`calculateRangeChange should return ${expectedRange} when selecting ${rangePosition} of ${range} with user input ${newDate}`, () => {

diff --git a/packages/x-date-pickers-pro/src/internals/utils/date-range-manager.ts b/packages/x-date-pickers-pro/src/internals/utils/date-range-manager.ts
@@ -53,7 +53,7 @@ export function calculateRangeChange<TDate extends PickerValidDate>({
   const truthyResult: CalculateRangeChangeResponse<TDate> = allowRangeFlip
     ? { nextSelection: 'end', newRange: [selectedDate, start!] }
     : { nextSelection: 'end', newRange: [selectedDate, null] };
-  return Boolean(start) && utils.isBefore(selectedDate!, start!)
+  return Boolean(start) && utils.isBeforeDay(selectedDate!, start!)
     ? truthyResult
     : { nextSelection: 'start', newRange: [start, selectedDate] };
 }