[DatePicker] Don't run onChange if same date selected (mui#1967)

mnajdova · Jul 15, 2020 · 6b0d30b · 6b0d30b
1 parent 54faaad
commit 6b0d30b
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 5 deletions.
diff --git a/docs/prop-types.json b/docs/prop-types.json
diff --git a/lib/src/DateRangePicker/DateRangePickerDay.tsx b/lib/src/DateRangePicker/DateRangePickerDay.tsx
@@ -141,6 +141,7 @@ export const PureDateRangeDay = ({
           {...other}
           day={day}
           selected={selected}
+          allowSameDateSelection={true}
           inCurrentMonth={inCurrentMonth}
           data-mui-test="DateRangeDay"
           className={clsx(

diff --git a/lib/src/__tests__/DatePickerTestingLib.test.tsx b/lib/src/__tests__/DatePickerTestingLib.test.tsx
@@ -78,4 +78,23 @@ describe('<DatePicker />', () => {
 
     expect(screen.queryByRole('dialog')).toBeInTheDocument();
   });
+
+  it('does not call onChange if same date selected', async () => {
+    const onChangeMock = jest.fn();
+
+    render(
+      <DesktopDatePicker
+        TransitionComponent={FakeTransitionComponent}
+        value={utilsToUse.date('2018-01-01T00:00:00.000Z')}
+        onChange={onChangeMock}
+        renderInput={props => <TextField {...props} />}
+      />
+    );
+
+    fireEvent.click(screen.getByLabelText('Choose date, selected date is Jan 1, 2018'));
+    await waitFor(() => screen.getByRole('dialog'));
+
+    fireEvent.click(screen.getByLabelText('Jan 1, 2018'));
+    expect(onChangeMock).not.toHaveBeenCalled();
+  });
 });
diff --git a/lib/src/_shared/hooks/usePickerState.ts b/lib/src/_shared/hooks/usePickerState.ts
@@ -104,7 +104,6 @@ export function usePickerState<TInput, TDateValue>(
         selectionState: PickerSelectionState = 'partial'
       ) => {
         setPickerDate(newDate);
-
         if (selectionState === 'partial') {
           acceptDate(newDate, false);
         }

diff --git a/lib/src/views/Calendar/Day.tsx b/lib/src/views/Calendar/Day.tsx
@@ -124,12 +124,18 @@ export interface DayProps extends ExtendMui<ButtonBaseProps> {
    * @default false
    */
   disableHighlightToday?: boolean;
+  /**
+   * Allow selecting the same date (fire onChange even if same date is selected).
+   * @default false
+   */
+  allowSameDateSelection?: boolean;
   onDayFocus: (day: unknown) => void;
   onDaySelect: (day: unknown, isFinish: PickerSelectionState) => void;
 }
 
 const PureDay: React.FC<DayProps> = ({
   allowKeyboardControl,
+  allowSameDateSelection = false,
   className,
   day,
   disabled,
@@ -180,6 +186,8 @@ const PureDay: React.FC<DayProps> = ({
   };
 
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    if (!allowSameDateSelection && selected) return;
+
     if (!disabled) {
       onDaySelect(day, 'finish');
     }