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

[wzup]

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)

[ljharb]

Are you running this in a browser?

[wzup]

Yes, in a browser.

I've created a widget that requires react-datepicker. It is a UMD library. All works well except react-dates events. Does it cause the issue because it is UMD library?

I add a widget on a page like this:

<script src="//localhost:3000/js/widget.js" type="application/javascript" charset="utf-8"></script>

Widget file, as I said, is a UMD and looks like this when bundled by webpack:

(function webpackUniversalModuleDefinition(root, factory) {
    if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory();
    else if(typeof define === 'function' && define.amd)
        define([], factory);
    else if(typeof exports === 'object')
        exports["AS"] = factory();
    else
        root["AS"] = factory();
})(this, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};
/******/
/******/    // The require function
/******/    function __webpack_require__(moduleId) {
......... so on

Source files.
Widget. It is an entry point for Webpack:

'use strict';
const React = require('react');

const DatePicker = require('./DatePicker');  // My DP wrapper
let css = require('Widget.scss');

class Widget extends React.Component {
    render() {
        return (
            <div className={css.saWidget} style={{backgroundColor: bg_color}}>
                    <div className={css.outBox}>
                        <DatePicker />
                    </div>
            </div>
        );
    }
    constructor(props) {
        super(props);
    }
};

module.exports = Widget;

My DP wrapper, almost identical to example:

'use strict';
const React = require('react');

const moment = require('moment');
import { DateRangePicker, SingleDatePicker, DayPickerRangeController } from 'react-dates';

class DP extends React.Component {
    render() {
        return (
            <SingleDatePicker
                {...this.props}
                id="date_input"
                date={this.state.date} // momentPropTypes.momentObj or null
                onDateChange={this.onDateChange} // PropTypes.func.isRequired
                focused={this.state.focused} // PropTypes.bool
                onFocusChange={this.onFocusChange} // PropTypes.func.isRequired
            />
        );
    }

    onFocusChange = ({focused}) => {
        this.setState({
            focused: focused
        })
    }

    onDateChange = (date) => {
        this.setState({ date })
    }

    constructor(props) {
        super(props);
        this.state = {
            date: moment(),
            focused: false,
        };
        this.onDateChange = this.onDateChange.bind(this);
        this.onFocusChange = this.onFocusChange.bind(this);
    }
};

DP.defaultProps = {
    id: 'date',
    placeholder: 'Date',
    screenReaderInputMessage: '== screenReaderInputMessage ==',
    showClearDate: true,
    reopenPickerOnClearDate: true,
    monthFormat: 'MMMM YYYY',
    displayFormat: () => moment.localeData().longDateFormat('L'),
}

module.exports = DP;

So what does go wrong? Why does react-dates throw errors?

Webpack config. Entry and output and target:

module.exports = {
    context: path.resolve(__dirname, '..'),
    entry: {
        'index': path.resolve(__dirname, '..', 'src/js/browser.js'),
        'sdk': path.resolve(__dirname, '..', 'src/js/sdk.js'),
        'sa_widget': path.resolve(__dirname, '..', 'src/js/sa_widget.js'),
        'vendors': [
            'react',
            'react-dom',
        ]
    },
    output: {
        filename: 'js/[name].js',
        path: path.resolve(__dirname, '..', 'public'),
        publicPath: '',
        pathinfo: true,
        sourceMapFilename: "[file].map",
        devtoolModuleFilenameTemplate: "webpack:///[resource-path]?[id]",
        libraryTarget: "umd",
        library: ['AS'],
    },
    target: 'web',
    devtool: 'cheap-module-source-map',

But the console is red:

[ConAntonakos]

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.

[joefiorini]

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.

[ljharb]

I think I've found a fix.

[chris-pearce]

I'm getting this too with the DRP and it seems to have just been introduced very recently as I've been using DRP for ages and I've just noticed it.

I'm on version: 12.5.0.

[ljharb]

hm, that doesn't make any sense :-/

[ljharb]

@chris-pearce can you try the change in 453face2df9ac8542f30e2a6afc92d8ee6f54801 locally, and see if it fixes the issue?

[chris-pearce]

@ljharb I'm not sure how I apply it locally as the code is transpiled?

[ljharb]

@chris-pearce npm install from the repo at that sha; cd into it; npm install && npm run build

[chris-pearce]

@ljharb that worked.

[ConAntonakos]

Thanks for addressing this, @ljharb!

[danhnguyen8br]

@ljharb
I see this fix is not included in release 12.5.0

[majapw]

@danhnguyen8br it was merged after we did the release so no, it's not
included in 12.5.0. We'll do a patch release shortly.

On Fri, Aug 25, 2017, 10:36 AM danhnguyen8br [e-mail]
wrote:

@ljharb https://github.com/ljharb
I see this fix is not included in release 12.5.0
[image: image]
https://user-images.githubusercontent.com/29014761/29708631-8db1ecf8-89b3-11e7-83c4-b9a29bdff94a.png

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/airbnb/react-dates/issues/437#issuecomment-324870673,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABUdtXxIfgB1PGBbQeFXqtZN3BTnX5lgks5sbpWqgaJpZM4M5d3g
.

[danhnguyen8br]

@majapw Sound great. Thank you