Hide overlay on overlayblur

[matthova]

This PR addresses the bug described in issue #819.

Old behavior: When using a custom overlay, after clicking on anything in the overlay, then clicking away, the overlay does not close. Once the overlay has been focused, the only way to make the overlay close is to click on the input and then click away.

New behavior: After clicking on anything in the overlay, then clicking away, the overlay will close.

Note: With this PR - If the user clicks on the input field, after clicking on something inside of the overlay, the overlay will momentarily close and then reopen. This is not ideal, but it is better than the current behavior. If there is a preferred way to avoid calling setState when clicking on the input field, let's do that instead 👍.

🚀 Amazing library 🚀 I hope this PR helps

[codecov]

Codecov Report

Merging #871 into master will not change coverage.
The diff coverage is 100%.

@@          Coverage Diff          @@
##           master   #871   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files          15     15           
  Lines         659    660    +1     
  Branches      146    146           
=====================================
+ Hits          659    660    +1

Impacted Files	Coverage Δ
src/DayPickerInput.js	100% <100%> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b086617...4d9698a. Read the comment docs.

[codecov]

Codecov Report

Merging #871 into master will not change coverage.
The diff coverage is 100%.

@@          Coverage Diff          @@
##           master   #871   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files          15     15           
  Lines         659    660    +1     
  Branches      146    146           
=====================================
+ Hits          659    660    +1

Impacted Files	Coverage Δ
src/DayPickerInput.js	100% <100%> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b086617...4d9698a. Read the comment docs.

[codecov]

Codecov Report

Merging #871 into master will not change coverage.
The diff coverage is 100%.

@@          Coverage Diff          @@
##           master   #871   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files          15     15           
  Lines         659    660    +1     
  Branches      146    146           
=====================================
+ Hits          659    660    +1

Impacted Files	Coverage Δ
src/DayPickerInput.js	100% <100%> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b086617...4d9698a. Read the comment docs.

[matthova]

Tested this a bit more. It solves one particular issue, but creates a bunch more issues with the standard React-Day-Input. Will revisit this once I have more time, but please let me know if a fix comes to mind.

[matthova]

I'm not sure how to patch the bug while maintaining standard behavior.
Instead of pursuing fixing the bug as described in #819 I'm going to create a fork where showOverlay is driven by props.

[nevace]

@matthova I had this same issue a while ago, stumbled across this while looking for a way to keep the overlay always open.

I ended up doing this to get around it, not ideal but might help

handleClickOutside = ({ target }) => {
    //this.datepicker is a ref to the container DayPickerInput is in and this.dayPickerInstance is the ref to DayPickerInput
    this.datepicker && !this.datepicker.contains(target) && this.dayPickerInstance.hideDayPicker();
};

componentDidMount() {
    document.addEventListener('click', this.handleClickOutside, true);
}

componentWillUnmount() {
    document.removeEventListener('click', this.handleClickOutside, true);
}