[DateRangePicker] Fix when typed invalid value, then closed and reope…

…ned the DateRangePicker(#1755)

* [DateRangePicker] Fix crashing when invalid date input applied as valiue

* Do not run `findClosestEnabledDate` for DateRangePicker calendars

* Remove inline style from <Calendar />, closes #1679

* [DateRangePicker] Keep input values even if they are invalid

* Fix missing import

* [DateRangePicker] Make impossible to navigate to the date after min/max date from calendar

* Fix issues found by ts

lib/.size-snapshot.json

@@ -1,26 +1,26 @@
 {
   "build/dist/material-ui-pickers.esm.js": {
-    "bundled": 188885,
-    "minified": 101313,
-    "gzipped": 26393,
+    "bundled": 188938,
+    "minified": 101335,
+    "gzipped": 26402,
     "treeshaked": {
       "rollup": {
-        "code": 83394,
+        "code": 83375,
         "import_statements": 2121
       },
       "webpack": {
-        "code": 92872
+        "code": 92851
       }
     }
   },
   "build/dist/material-ui-pickers.umd.js": {
-    "bundled": 299785,
-    "minified": 116974,
-    "gzipped": 33364
+    "bundled": 299832,
+    "minified": 116954,
+    "gzipped": 33374
   },
   "build/dist/material-ui-pickers.umd.min.js": {
-    "bundled": 258439,
-    "minified": 107835,
-    "gzipped": 30612
+    "bundled": 258486,
+    "minified": 107815,
+    "gzipped": 30601
   }
 }

lib/src/DateRangePicker/DateRangePickerInput.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { RangeInput, DateRange } from './RangeTypes';
+import { useUtils } from '../_shared/hooks/useUtils';
 import { makeStyles } from '@material-ui/core/styles';
 import { MaterialUiPickersDate } from '../typings/date';
 import { CurrentlySelectingRangeEndProps } from './RangeTypes';
@@ -62,26 +63,26 @@ export interface DateRangeInputProps
 }
 
 export const DateRangePickerInput: React.FC<DateRangeInputProps> = ({
-  rawValue,
-  onChange,
-  rawValue: [start, end],
-  parsedDateValue: [parsedStart, parsedEnd],
-  open,
   containerRef,
-  forwardedRef,
   currentlySelectingRangeEnd,
-  setCurrentlySelectingRangeEnd,
-  openPicker,
   disableOpenPicker,
-  startText,
   endText,
+  forwardedRef,
+  onBlur,
+  onChange,
+  open,
+  openPicker,
+  rawValue,
   readOnly,
   renderInput,
+  setCurrentlySelectingRangeEnd,
+  startText,
   TextFieldProps,
-  onBlur,
+  rawValue: [start, end],
   validationError: [startValidationError, endValidationError],
   ...other
 }) => {
+  const utils = useUtils();
   const classes = useStyles();
   const startRef = React.useRef<HTMLInputElement>(null);
   const endRef = React.useRef<HTMLInputElement>(null);
@@ -108,11 +109,11 @@ export const DateRangePickerInput: React.FC<DateRangeInputProps> = ({
   );
 
   const handleStartChange = (date: MaterialUiPickersDate, inputString?: string) => {
-    lazyHandleChangeCallback([date, parsedEnd], inputString);
+    lazyHandleChangeCallback([date, utils.date(end)], inputString);
   };
 
   const handleEndChange = (date: MaterialUiPickersDate, inputString?: string) => {
-    lazyHandleChangeCallback([parsedStart, date], inputString);
+    lazyHandleChangeCallback([utils.date(start), date], inputString);
   };
 
   const openRangeStartSelection = () => {

lib/src/DateRangePicker/DateRangePickerViewDesktop.tsx

@@ -6,12 +6,18 @@ import { makeStyles } from '@material-ui/core/styles';
 import { MaterialUiPickersDate } from '../typings/date';
 import { calculateRangePreview } from './date-range-manager';
 import { Calendar, CalendarProps } from '../views/Calendar/Calendar';
-import { isWithinRange, isStartOfRange, isEndOfRange } from '../_helpers/date-utils';
+import { defaultMinDate, defaultMaxDate } from '../constants/prop-types';
 import { ArrowSwitcher, ExportedArrowSwitcherProps } from '../_shared/ArrowSwitcher';
 import {
   usePreviousMonthDisabled,
   useNextMonthDisabled,
 } from '../_shared/hooks/date-helpers-hooks';
+import {
+  isWithinRange,
+  isStartOfRange,
+  isEndOfRange,
+  DateValidationProps,
+} from '../_helpers/date-utils';
 
 export interface ExportedDesktopDateRangeCalendarProps {
   /**
@@ -24,6 +30,7 @@ export interface ExportedDesktopDateRangeCalendarProps {
 interface DesktopDateRangeCalendarProps
   extends ExportedDesktopDateRangeCalendarProps,
     CalendarProps,
+    DateValidationProps,
     ExportedArrowSwitcherProps {
   date: DateRange;
   changeMonth: (date: MaterialUiPickersDate) => void;
@@ -82,14 +89,17 @@ export const DateRangePickerViewDesktop: React.FC<DesktopDateRangeCalendarProps>
   onChange,
   disableFuture,
   disablePast,
-  minDate,
-  maxDate,
+  minDate: __minDate,
+  maxDate: __maxDate,
   currentlySelectingRangeEnd,
   currentMonth,
   ...other
 }) => {
   const utils = useUtils();
   const classes = useStyles();
+  const minDate = __minDate || utils.date(defaultMinDate);
+  const maxDate = __maxDate || utils.date(defaultMaxDate);
+
   const [rangePreviewDay, setRangePreviewDay] = React.useState<MaterialUiPickersDate>(null);
 
   const isNextMonthDisabled = useNextMonthDisabled(currentMonth, { disableFuture, maxDate });
@@ -161,10 +171,6 @@ export const DateRangePickerViewDesktop: React.FC<DesktopDateRangeCalendarProps>
               {...other}
               key={index}
               date={date}
-              minDate={minDate}
-              maxDate={maxDate}
-              disablePast={disablePast}
-              disableFuture={disableFuture}
               className={classes.calendar}
               onChange={handleDayChange}
               currentMonth={monthOnIteration}

lib/src/DateRangePicker/DateRangePickerViewMobile.tsx

@@ -6,13 +6,20 @@ import { useUtils } from '../_shared/hooks/useUtils';
 import { MaterialUiPickersDate } from '../typings/date';
 import { Calendar, CalendarProps } from '../views/Calendar/Calendar';
 import { ExportedArrowSwitcherProps } from '../_shared/ArrowSwitcher';
-import { isWithinRange, isStartOfRange, isEndOfRange } from '../_helpers/date-utils';
+import { defaultMinDate, defaultMaxDate } from '../constants/prop-types';
+import {
+  isWithinRange,
+  isStartOfRange,
+  isEndOfRange,
+  DateValidationProps,
+} from '../_helpers/date-utils';
 
 export interface ExportedMobileDateRangeCalendarProps {}
 
 interface DesktopDateRangeCalendarProps
   extends ExportedMobileDateRangeCalendarProps,
     CalendarProps,
+    DateValidationProps,
     ExportedArrowSwitcherProps {
   date: DateRange;
   changeMonth: (date: MaterialUiPickersDate) => void;
@@ -30,9 +37,13 @@ export const DateRangePickerViewMobile: React.FC<DesktopDateRangeCalendarProps>
   rightArrowButtonText,
   rightArrowIcon,
   onChange,
+  minDate: __minDate,
+  maxDate: __maxDate,
   ...other
 }) => {
   const utils = useUtils();
+  const minDate = __minDate || utils.date(defaultMinDate);
+  const maxDate = __maxDate || utils.date(defaultMaxDate);
 
   return (
     <>
@@ -47,6 +58,8 @@ export const DateRangePickerViewMobile: React.FC<DesktopDateRangeCalendarProps>
         rightArrowButtonProps={rightArrowButtonProps}
         rightArrowButtonText={rightArrowButtonText}
         rightArrowIcon={rightArrowIcon}
+        minDate={minDate}
+        maxDate={maxDate}
         {...other}
       />
 

lib/src/__tests__/DateRangePicker.test.tsx

@@ -1,16 +1,23 @@
 // Note that most of use cases are covered in cypress tests e2e/integration/DateRange.spec.ts
 import * as React from 'react';
 import { isWeekend } from 'date-fns';
-import { TextField } from '@material-ui/core';
 import { mount, utilsToUse } from './test-utils';
+import { TextField, TextFieldProps } from '@material-ui/core';
 import { DesktopDateRangePicker } from '../DateRangePicker/DateRangePicker';
 
+const defaultRangeRenderInput = (startProps: TextFieldProps, endProps: TextFieldProps) => (
+  <>
+    <TextField {...startProps} />
+    <TextField {...endProps} />
+  </>
+);
+
 describe('DateRangePicker', () => {
   test('allows select range', () => {
     const component = mount(
       <DesktopDateRangePicker
-        renderInput={props => <TextField {...props} />}
         open
+        renderInput={defaultRangeRenderInput}
         onChange={jest.fn()}
         value={[
           utilsToUse.date(new Date('2018-01-01T00:00:00.000Z')),
@@ -25,8 +32,8 @@ describe('DateRangePicker', () => {
   test('allows disabling dates', () => {
     const component = mount(
       <DesktopDateRangePicker
-        renderInput={props => <TextField {...props} />}
         open
+        renderInput={defaultRangeRenderInput}
         minDate={new Date('2005-01-01')}
         shouldDisableDate={date => isWeekend(utilsToUse.toJsDate(date))}
         onChange={jest.fn()}
@@ -47,8 +54,8 @@ describe('DateRangePicker', () => {
   test('prop: calendars', () => {
     const component = mount(
       <DesktopDateRangePicker
-        renderInput={props => <TextField {...props} />}
         open
+        renderInput={defaultRangeRenderInput}
         calendars={3}
         onChange={jest.fn()}
         value={[
@@ -61,4 +68,23 @@ describe('DateRangePicker', () => {
     expect(component.find('Calendar').length).toBe(3);
     expect(component.find('button[data-mui-test="DateRangeDay"]').length).toBe(90);
   });
+
+  test(`doesn't crashes if opening picker with invalid date input`, () => {
+    const component = mount(
+      <DesktopDateRangePicker
+        open
+        renderInput={defaultRangeRenderInput}
+        calendars={3}
+        onChange={jest.fn()}
+        value={[utilsToUse.date(new Date(NaN)), utilsToUse.date('2018-01-31T00:00:00.000')]}
+      />
+    );
+
+    component
+      .find('input')
+      .at(1)
+      .simulate('focus');
+
+    expect(component.find('div[role="tooltip"]').length).toBe(1);
+  });
 });

lib/src/__tests__/test-utils.tsx

@@ -8,6 +8,7 @@ import LocalizationProvider from '../LocalizationProvider';
 import { IUtils } from '@date-io/core/IUtils';
 import { DatePickerProps } from '../DatePicker';
 import { MaterialUiPickersDate } from '../typings/date';
+import { BasePickerProps } from '../typings/BasePicker';
 import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 
 interface WithUtilsProps {
@@ -43,10 +44,14 @@ export const mount = <P extends WithUtilsProps>(element: React.ReactElement<P>)
     </ThemeProvider>
   );
 
-export const mountPickerWithState = (
-  defaultValue: MaterialUiPickersDate,
-  render: (props: Pick<DatePickerProps, 'onChange' | 'value' | 'renderInput'>) => React.ReactElement
-) => {
+export function mountPickerWithState<TValue>(
+  defaultValue: TValue,
+  render: (
+    props: Pick<BasePickerProps<TValue, TValue>, 'onChange' | 'value'> & {
+      renderInput: DatePickerProps['renderInput'];
+    }
+  ) => React.ReactElement
+) {
   const PickerMountComponent = () => {
     const [value, setDate] = React.useState(defaultValue);
 
@@ -58,7 +63,7 @@ export const mountPickerWithState = (
   };
 
   return mount(<PickerMountComponent />);
-};
+}
 
 export const shallowRender = (render: (props: any) => React.ReactElement<any>) => {
   return enzyme.shallow(render({ utils: utilsToUse, classes: {} as any, theme: {} as any }));

lib/src/_helpers/date-utils.ts

@@ -115,7 +115,7 @@ export function parseRangeInputValue(
   { value = [null, null] }: BasePickerProps<RangeInput, DateRange>
 ) {
   return value.map(date =>
-    date === null ? null : utils.startOfDay(utils.date(date))
+    !utils.isValid(date) || date === null ? null : utils.startOfDay(utils.date(date))
   ) as DateRange;
 }