react-dates: TypeError: Cannot read property 'contains' of null

What error is this? How to solve?

OutsideClickHandler.js:1 Uncaught TypeError: Cannot read property 'contains' of null
    at OutsideClickHandler.onOutsideClick (webpack:///./~/react-dates/lib/components/OutsideClickHandler.js?:1:3926)
    at eval (webpack:///./~/consolidated-events/lib/TargetEventHandlers.js?:1:1684)
    at Array.forEach (native)
    at TargetEventHandlers.handleEvent (webpack:///./~/consolidated-events/lib/TargetEventHandlers.js?:1:1620)

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Comments: 15 (5 by maintainers)

Commits related to this issue

Most upvoted comments

Sorry to bump this issue, but I seem to have also encountered this error message.

I think the issue is that I have my own <OutsideClickHandler> wrapping the react-dates component which also has its own OutsideClickHandler. When the component is removed from the VirtualDOM, I think it tries to trigger the OutsideClickHandler internally?

Would it be beneficial to the library to have a conditional wrapping this portion?: https://github.com/airbnb/react-dates/blob/master/src/components/OutsideClickHandler.jsx#L38

Something like if (this.childNode)?

Or maybe, allow onOutsideClick as a prop to <DateRangePicker>?

Also, another thing that helped was removing the consolidated-events API from use within my custo m <OutsideClickHandler>. For some reason that was causing issues.

I think I’ve found a fix.

Thanks for addressing this, @ljharb!

@ljharb that worked.

I’m seeing this error as well, but for me it happens any time I click outside the date range picker to close it, regardless of whether or not I’ve selected a date. I copy/pasted the DateRange example in the readme and saw this error on my first attempt to use it.