Expose onBlur prop

[srph]

<DayPicker onBlur={} />

I have a use-case for there where the DayPicker appears as a popover.

ATM, I show/hide the datepicker through a state (active when the input is focused; inactive on blur). However, clicking the DayPicker div changes the focus from the input to the DayPicker.

I have no means of checking if the user has focused away from the DayPicker.

• If there's blur, there's usually focus, but I'm not sure if there's any relevance.
• Or we could just use the spread operator so all other props are accepted (<DayPicker onDayClick={...} {...other} />).

I'm willing to send a PR, just need some approval first.

[gpbl]

👍 Makes sense, thanks for the idea.

I would even adopt the spread operator, but take care! It requires to remove some HTML attributes, such as tabIndex and style, and to update a bit the render() and handleKeyDown() functions. This is how I would make it:

handleKeyDown(e) {
    e.persist();
    const { canChangeMonth, onKeyDown }  = this.props;
    if (!canChangeMonth && onKeyDown) {
       onKeyDown(e);
       return;
    }
    if (canChangeMonth) {
      const callback = onKeyDown ? () => onKeyDown(e) : null;
      switch (e.keyCode) {
      case keys.LEFT:
        this.showPreviousMonth(callback);
        break;
      case keys.RIGHT:
        this.showNextMonth(callback);
        break;
     }
    }
  },
// snip
render() {
    const { numberOfMonths, locale, canChangeMonth, onDayClick, onDayTouchTap, ...attributes } = this.props;
    const { currentMonth } = this.state;
    let className = `DayPicker DayPicker--${locale}`;

    if (!onDayClick && !onDayTouchTap) {
      className = `${className} DayPicker--interactionDisabled`;
    }
    if (attributes.className) {
      className = `${className} ${attributes.className}`;
    }
    const months = [];
    let month;
    for (let i = 0; i < numberOfMonths; i++) {
      month = DateUtils.addMonths(currentMonth, i);
      months.push(this.renderMonth(month, i));
    }

    return (
      <div role="widget" onKeyDown={ ::this.handleKeyDown } {...attributes}>
        { canChangeMonth && this.renderNavBar() }
        { months }
      </div>
    );
}

Please use attributes as spread variable.

[srph]

awesome! alright, I'll work on it after I sleep! I might cast some ancient magic spell I'm not aware of.

[gpbl]

lol @srph then have a good sleep with magic dreams 🍄