How to onFocus and onBlur a React/Redux form field that's connected to React Date Picker?
<p>I've got this simple v6 redux-form with an input that renders a custom component that populates its value using react-day-picker.</p>

<p><a href="https://github.com/gpbl/react-day-picker" rel="nofollow noreferrer">https://github.com/gpbl/react-day-picker</a></p>

<p>I chose react-day-picker over others because it doesn't depend on moment.js and works with my current set up.</p>

<p><strong>When I focus the field, I want the datepicker to pop up, but if I click anywhere that's not the datepicker, I want it to disappear.</strong></p>

<p>Essentially, I want my React datepicker to work like the jQueryUI one in:</p>

<p><a href="https://jqueryui.com/datepicker/" rel="nofollow noreferrer">https://jqueryui.com/datepicker/</a></p>

<p>The three scenarios I end up with are:</p>

<ol>
<li><p>I click the field, the datepicker pops up, but will not disappear unless I select a date or click the field again (this is too rigid for our needs).</p></li>
<li><p>I click the field, the datepicker pops up, but will disappear TOO quickly if I click anywhere, as the input field's onBlur gets called before it processes the click event for the datepicker to populate the field with the chosen date.</p></li>
<li><p>I click the field, the datepicker pops up, gets auto-focused, blurs properly, except when I click anything that's not &lt; body> or the datepicker.</p></li>
</ol>

<p>I first tried to use a sibling empty div that wraps the whole page, so when I click the empty div, it'll toggle the datepicker properly. This worked OK with z-indexes and position: fixed until I changed the datepicker's month, which seems to re-render the datepicker and messed with the order of the clicking, which led to situation 2) again.</p>

<p>My most current attempt is to auto-focus the datepicker div when it pops up, so when I blur anything that's not the datepicker, it will toggle the datepicker. This worked in theory, except the datepicker is a component with many nested &lt; div>'s inside it to control day, week, month, disabled days... so when I click a 'day', it registers a blur because I'm clicking the 'day' <code>&lt;div&gt;</code>, not the root 'datepicker' <code>&lt;div&gt;</code>, which is what was initially focused.</p>

<p>The solution to the above was to tweak 'datepicker' <code>&lt;div&gt;</code>'s onBlur such that it will only toggle the datepicker when document.activeElement is &lt; body>, but that only works if I don't click another form field.</p>

<p><strong>WizardFormPageOne.js:</strong></p>

<pre><code>function WizardFormPageOne({ handleSubmit }) {
  return (
    &lt;form onSubmit={handleSubmit} className="col-xs-6"&gt;
      &lt;h1&gt;WizardFormPageOne&lt;/h1&gt;

      &lt;div className="card"&gt;
        &lt;div className="card-block"&gt;
          &lt;div className="form-group"&gt;
            &lt;label htmlFor="first"&gt;Label 1&lt;/label&gt;
            &lt;Field type="text" name="first" component={DateInput} className="form-control" /&gt;
          &lt;/div&gt;
          ...

export default reduxForm({
  form: 'wizardForm',
  destroyOnUnmount: false,
})(WizardFormPageOne);
</code></pre>

<p><strong>DateInput.js:</strong></p>

<pre><code>import React from 'react';

import styles from './styles.css';
import DatePicker from '../DatePicker';

class DateInput extends React.Component { // eslint-disable-line react/prefer-stateless-function
  constructor(props) {
    super(props);

    this.state = {
      dateValue: new Date(),
      activeDateWidget: false,
    };
  }

  changeDate = (date) =&gt; {
    this.setState({
      dateValue: date,
    });
  }

  changeActiveDateWidget = (e) =&gt; {
    e.stopPropagation();
    this.setState({
      activeDateWidget: !this.state.activeDateWidget,
    });
  }

  render() {
    const { input, meta } = this.props;
    const { dateValue, activeDateWidget } = this.state;
    return (
      &lt;div className={styles.dateInput}&gt;
        &lt;input
          {...input}
          className="form-control"
          type="text"
          value={dateValue}
          onClick={this.changeActiveDateWidget}
          // onBlur={this.changeActiveDateWidget}
        /&gt;

        {activeDateWidget ? (
          &lt;div&gt;
            &lt;DatePicker
              changeActiveDateWidget={this.changeActiveDateWidget}
              changeDate={this.changeDate}
              dateValue={dateValue}
            /&gt;
          &lt;/div&gt;
        ) : (
          &lt;div&gt;&lt;/div&gt;
        )}
      &lt;/div&gt;
    );
  }
}

export default DateInput;
</code></pre>

<p><strong>DatePicker.js:</strong></p>

<pre><code>import React from 'react';
import 'react-day-picker/lib/style.css';
import DayPicker, { DateUtils } from 'react-day-picker';

import styles from './styles.css';
import disabledDays from './disabledDays';


class DatePicker extends React.Component { // eslint-disable-line react/prefer-stateless-function
  constructor(props) {
    super(props);
    this.state = {
      selectedDay: new Date(),
    };
  }

  componentDidMount() {
    if (this._input) {
      this._input.focus();
    }
  }

  handleDayClick = (e, day, { disabled }) =&gt; {
    e.stopPropagation();
    if (disabled) {
      return;
    }
    this.setState({ selectedDay: day }, () =&gt; {
      this.props.changeDate(day);
      this.props.changeActiveDateWidget();
    });
  }

  focusThisComponent = (e) =&gt; {
    if (e) {
      this._input = e;
    }
  }

  focusIt = () =&gt; {
    console.log('focusing');
  }

  blurIt = () =&gt; {
    console.log('blurring');
    setTimeout(() =&gt; {
      if (document.activeElement == document.body) {
        this.props.changeActiveDateWidget();
      }
    }, 1);
  }

  render() {
    const { changeActiveDateWidget } = this.props;
    const { selectedDay } = this.state;
    return (
      &lt;div
        className={styles.datePicker}
        ref={this.focusThisComponent}
        tabIndex="1"
        onFocus={this.focusIt}
        onBlur={this.blurIt}
      &gt;
        &lt;DayPicker
          id="THISTHING"
          initialMonth={selectedDay}
          disabledDays={disabledDays}
          selectedDays={(day) =&gt; DateUtils.isSameDay(selectedDay, day)}
          onDayClick={this.handleDayClick}
        /&gt;
      &lt;/div&gt;
    );
  }
}

export default DatePicker;
</code></pre>

<p>Here's a screencast of the issue I'm having now:</p>

<p><a href="http://screencast.com/t/kZuIwUzl" rel="nofollow noreferrer">http://screencast.com/t/kZuIwUzl</a></p>

<p>The datepicker toggles properly, except when clicking on another field, at which point it stops blurring/toggling properly. All my tinkering either led me make to one of the three scenarios listed above.</p>