[DateTimePicker] Allow same date selection (#2016)

* [DateTimePicker] Allow same date selection * Override all props in the DateRangePickerDay
mui · Jul 22, 2020 · 32b7483 · 32b7483 · vercel · Jul 22, 2020
1 parent c235589
commit 32b7483
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 11 deletions.
diff --git a/lib/src/DateRangePicker/DateRangePickerDay.tsx b/lib/src/DateRangePicker/DateRangePickerDay.tsx
@@ -136,12 +136,12 @@ export const PureDateRangeDay = ({
         })}
       >
         <Day
-          allowKeyboardControl={false}
-          disableMargin
           {...other}
+          disableMargin
+          allowSameDateSelection
+          allowKeyboardControl={false}
           day={day}
           selected={selected}
-          allowSameDateSelection={true}
           inCurrentMonth={inCurrentMonth}
           data-mui-test="DateRangeDay"
           className={clsx(

diff --git a/lib/src/DateTimePicker/DateTimePicker.tsx b/lib/src/DateTimePicker/DateTimePicker.tsx
@@ -80,6 +80,7 @@ function useInterceptProps({
     orientation,
     showToolbar: true,
     showTabs: true,
+    allowSameDateSelection: true,
     minDate: minDateTime || minDate,
     minTime: minDateTime || minTime,
     maxDate: maxDateTime || maxDate,

diff --git a/lib/src/__tests__/DateTimePickerTestingLib.test.tsx b/lib/src/__tests__/DateTimePickerTestingLib.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import TextField from '@material-ui/core/TextField';
 import { utilsToUse } from './test-utils';
 import { createClientRender } from './createClientRender';
-import { DesktopDateTimePicker } from '../DateTimePicker';
+import { DesktopDateTimePicker, StaticDateTimePicker } from '../DateTimePicker';
 import { fireEvent, screen, waitFor } from '@testing-library/react';
 
 describe('<DateTimePicker />', () => {
@@ -96,4 +96,20 @@ describe('<DateTimePicker />', () => {
     fireEvent.click(screen.getByLabelText('open next view'));
     expect(screen.getByLabelText('open next view')).toBeDisabled();
   });
+
+  it('allows to select the same day and move to the next view', () => {
+    const onChangeMock = jest.fn()
+    render(
+      <StaticDateTimePicker
+        onChange={onChangeMock}
+        renderInput={(props) => <TextField {...props} />}
+        value={utilsToUse.date('2018-01-01T00:00:00.000Z')}
+      />
+    );
+
+    fireEvent.click(screen.getByLabelText("Jan 1, 2018"))
+    expect(onChangeMock).toHaveBeenCalled()
+
+    expect(screen.getByLabelText(/Selected time/)).toBeInTheDocument()
+  })
 });
diff --git a/lib/src/views/Calendar/Calendar.tsx b/lib/src/views/Calendar/Calendar.tsx
@@ -13,7 +13,10 @@ import { useGlobalKeyDown, keycode } from '../../_shared/hooks/useKeyDown';
 import { SlideTransition, SlideDirection, SlideTransitionProps } from './SlideTransition';
 
 export interface ExportedCalendarProps
-  extends Pick<DayProps, 'disableHighlightToday' | 'showDaysOutsideCurrentMonth'> {
+  extends Pick<
+    DayProps,
+    'disableHighlightToday' | 'showDaysOutsideCurrentMonth' | 'allowSameDateSelection'
+  > {
   /**
    * Calendar onChange.
    */
@@ -55,7 +58,7 @@ export interface CalendarProps extends ExportedCalendarProps {
 }
 
 const muiComponentConfig = { name: 'MuiPickersCalendar' };
-export const useStyles = makeStyles((theme) => {
+export const useStyles = makeStyles(theme => {
   const weeksContainerHeight = (DAY_SIZE + DAY_MARGIN * 4) * 6;
   return {
     root: {
@@ -119,6 +122,7 @@ export const Calendar: React.FC<CalendarProps> = withDefaultProps(
     showDaysOutsideCurrentMonth,
     className,
     loading,
+    allowSameDateSelection,
     renderLoading = () => <span data-mui-test="loading-progress">...</span>,
     TransitionProps,
   }) => {
@@ -156,7 +160,7 @@ export const Calendar: React.FC<CalendarProps> = withDefaultProps(
     const currentMonthNumber = utils.getMonth(currentMonth);
     const selectedDates = (Array.isArray(date) ? date : [date])
       .filter(Boolean)
-      .map((selectedDateItem) => utils.startOfDay(selectedDateItem));
+      .map(selectedDateItem => utils.startOfDay(selectedDateItem));
 
     return (
       <React.Fragment>
@@ -184,9 +188,9 @@ export const Calendar: React.FC<CalendarProps> = withDefaultProps(
             {...TransitionProps}
           >
             <div role="grid" className={classes.weekContainer}>
-              {utils.getWeekArray(currentMonth).map((week) => (
+              {utils.getWeekArray(currentMonth).map(week => (
                 <div role="row" key={`week-${week[0]}`} className={classes.week}>
-                  {week.map((day) => {
+                  {week.map(day => {
                     const disabled = isDateDisabled(day);
                     const isDayInCurrentMonth = utils.getMonth(day) === currentMonthNumber;
 
@@ -196,14 +200,15 @@ export const Calendar: React.FC<CalendarProps> = withDefaultProps(
                       role: 'cell',
                       isAnimating: isMonthSwitchingAnimating,
                       disabled: disabled,
-                      allowKeyboardControl: allowKeyboardControl,
+                      allowKeyboardControl,
+                      allowSameDateSelection,
                       focused:
                         allowKeyboardControl &&
                         Boolean(focusedDay) &&
                         utils.isSameDay(day, focusedDay),
                       today: utils.isSameDay(day, now),
                       inCurrentMonth: isDayInCurrentMonth,
-                      selected: selectedDates.some((selectedDate) =>
+                      selected: selectedDates.some(selectedDate =>
                         utils.isSameDay(selectedDate, day)
                       ),
                       disableHighlightToday,