DateInput: entering bad date blows up entire page

If i type a badly formed date into DateInput the whole page goes white.

in come cases, it detects bad date and makes the input border red. in other cases it blows up entire page

              <DateInput
                    formatDate={date => date.toLocaleDateString()}
                    parseDate={str => new Date(str)}
                    onChange={(newDate) => {r.endDate = newDate; this.updateRestriction(r) }}
                    inputProps={{ leftIcon: "calendar" }}
                    placeholder={"as of M/D/Y"} value={r.endDAte}>
                </DateInput>

errors:

Uncaught Error: [Blueprint] <DatePicker> value prop must be within minDate and maxDate bounds.
    at DatePicker.validateProps (datePicker.js:215)
    at DatePicker.AbstractPureComponent.componentWillReceiveProps (abstractPureComponent.js:48)
    at DatePicker.componentWillReceiveProps (datePicker.js:173)
    at callComponentWillReceiveProps (react-dom.development.js:11826)
    at updateClassInstance (react-dom.development.js:12039)
    at updateClassComponent (react-dom.development.js:15071)
    at beginWork (react-dom.development.js:16064)
    at performUnitOfWork (react-dom.development.js:20084)
    at workLoop (react-dom.development.js:20125)
    at HTMLUnknownElement.callCallback (react-dom.development.js:147)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
    at invokeGuardedCallback (react-dom.development.js:250)
    at replayUnitOfWork (react-dom.development.js:19308)
    at renderRoot (react-dom.development.js:20238)
    at performWorkOnRoot (react-dom.development.js:21162)
    at performWork (react-dom.development.js:21072)
    at performSyncWork (react-dom.development.js:21046)
    at interactiveUpdates$1 (react-dom.development.js:21331)
    at interactiveUpdates (react-dom.development.js:2268)
    at dispatchInteractiveEvent (react-dom.development.js:5086)
DatePicker.validateProps @ datePicker.js:215
AbstractPureComponent.componentWillReceiveProps @ abstractPureComponent.js:48
DatePicker.componentWillReceiveProps @ datePicker.js:173
callComponentWillReceiveProps @ react-dom.development.js:11826
updateClassInstance @ react-dom.development.js:12039
updateClassComponent @ react-dom.development.js:15071
beginWork @ react-dom.development.js:16064
performUnitOfWork @ react-dom.development.js:20084
workLoop @ react-dom.development.js:20125
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
replayUnitOfWork @ react-dom.development.js:19308
renderRoot @ react-dom.development.js:20238
performWorkOnRoot @ react-dom.development.js:21162
performWork @ react-dom.development.js:21072
performSyncWork @ react-dom.development.js:21046
interactiveUpdates$1 @ react-dom.development.js:21331
interactiveUpdates @ react-dom.development.js:2268
dispatchInteractiveEvent @ react-dom.development.js:5086
index.js:1446 The above error occurred in the <Blueprint3.DatePicker> component:
    in Blueprint3.DatePicker (created by Blueprint3.DateInput)
    in div (created by Blueprint3.DateInput)
    in div (created by InnerPopper)
    in div (created by InnerPopper)
    in Blueprint3.ResizeSensor (created by InnerPopper)
    in div (created by InnerPopper)
    in InnerPopper (created by Context.Consumer)
    in Popper (created by Blueprint3.Popover)
    in Transition (created by CSSTransition)
    in CSSTransition (created by Blueprint3.Overlay)
    in div (created by TransitionGroup)
    in TransitionGroup (created by Blueprint3.Overlay)
    in Blueprint3.Portal (created by Blueprint3.Overlay)
    in Blueprint3.Overlay (created by Blueprint3.Popover)
    in span (created by Blueprint3.Popover)
    in Manager (created by Blueprint3.Popover)
    in Blueprint3.Popover (created by Blueprint3.DateInput)
    in Blueprint3.DateInput (at Restrictions.tsx:141)
    in td (at Restrictions.tsx:184)
    in tr (at Restrictions.tsx:164)
    in tbody (at Restrictions.tsx:215)
    in table (at Restrictions.tsx:202)
    in div (at Restrictions.tsx:78)
    in Restrictions (at App.tsx:14)
    in div (at App.tsx:12)
    in App (at src/index.tsx:13)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
function.console.(anonymous function) @ index.js:1446
logCapturedError @ react-dom.development.js:17679
logError @ react-dom.development.js:17715
update.callback @ react-dom.development.js:18738
callCallback @ react-dom.development.js:16903
commitUpdateEffects @ react-dom.development.js:16943
commitUpdateQueue @ react-dom.development.js:16933
commitLifeCycles @ react-dom.development.js:17971
commitAllLifeCycles @ react-dom.development.js:19473
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:19697
(anonymous) @ react-dom.development.js:21245
unstable_runWithPriority @ scheduler.development.js:255
completeRoot @ react-dom.development.js:21244
performWorkOnRoot @ react-dom.development.js:21167
performWork @ react-dom.development.js:21072
performSyncWork @ react-dom.development.js:21046
interactiveUpdates$1 @ react-dom.development.js:21331
interactiveUpdates @ react-dom.development.js:2268
dispatchInteractiveEvent @ react-dom.development.js:5086
react-dom.development.js:21132 Uncaught Error: [Blueprint] <DatePicker> value prop must be within minDate and maxDate bounds.
    at DatePicker.validateProps (datePicker.js:215)
    at DatePicker.AbstractPureComponent.componentWillReceiveProps (abstractPureComponent.js:48)
    at DatePicker.componentWillReceiveProps (datePicker.js:173)
    at callComponentWillReceiveProps (react-dom.development.js:11826)
    at updateClassInstance (react-dom.development.js:12039)
    at updateClassComponent (react-dom.development.js:15071)
    at beginWork (react-dom.development.js:16064)
    at performUnitOfWork (react-dom.development.js:20084)
    at workLoop (react-dom.development.js:20125)
    at renderRoot (react-dom.development.js:20205)
    at performWorkOnRoot (react-dom.development.js:21162)
    at performWork (react-dom.development.js:21072)
    at performSyncWork (react-dom.development.js:21046)
    at interactiveUpdates$1 (react-dom.development.js:21331)
    at interactiveUpdates (react-dom.development.js:2268)
    at dispatchInteractiveEvent (react-dom.development.js:5086)

[silviodeligios]

if i set only the formatDate and parseDate input the DateInput make the entire page crash if i set an out of range date… you should reopen this

[justinbhopper]

@adidahiya Can you explain the rationale by the console.errors for the “Out of range” use case?

When using the DateInput in uncontrolled mode, if the user types in a date out of the valid range, we report this as a console.errors in dev-mode. It at least doesn’t blow up thanks to the latest fix, but I fail to understand why we would want to even report this as an error in the console.

A developer cannot do anything about this use case – so why report an error to the console? As far as I can tell, the component handles this situation as expected already (aside from reporting to console).