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

todor-a · Jul 18, 2020 · 61be87e · 61be87e
1 parent baff00a
commit 61be87e
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');
  }