fix(Daypicker): add blur handler to capture all blur events

[tanmoyopenroot]

PR checklist

• Addresses an existing issue: fixes Unexpected onBlur behavior for DayPickerRangeController? #1571
• bug
• Includes tests
• Documentation update

Overview of change:

Ordinarily, the focus and blur events in the DOM dot not bubble. React will bubble these events through its event model. So we can listen for blur events at the root of a component and react to these events fired on its child nodes.

[ljharb]

This makes the onBlur prop not just apply to the keyboard picker, but also to the DayPicker. Do you think the consumer would want to know which one is triggering it? Do you think it could be a breaking change for someone who's already passing onBlur?

[ljharb]

Suggested change

	expect(onBlurStub.callCount).to.equal(1);
	expect(onBlurStub).to.have.property('callCount', 1);

[ljharb]

Suggested change

	expect(wrapper.prop('onBlur')).to.equal(onBlurStub);
	expect(wrapper.props()).to.have.property('onBlur', onBlurStub);

[tanmoyopenroot]

This makes the onBlur prop not just apply to the keyboard picker, but also to the DayPicker. Do you think the consumer would want to know which one is triggering it? Do you think it could be a breaking change for someone who's already passing onBlur?

Could you please clarify it for me?

[ljharb]

Someone who is currently passing onBlur expects it to only be fired from the current components it's passed to; silently and suddenly passing it to new components means their callback will suddenly be invoked more times than they expect, on different components - that makes this a breaking change for them.

[tanmoyopenroot]

Someone who is currently passing onBlur expects it to only be fired from the current components it's passed to; silently and suddenly passing it to new components means their callback will suddenly be invoked more times than they expect, on different components - that makes this a breaking change for them.

ok, I will fix it.
Do we need to listen to all onblur events within the calendar(like blur event from navigation button, shortcut and day click) or only when it loses focus from the calendar boundary?

[ljharb]

removing this call is a breaking change

[tanmoyopenroot]

But blur event from CalendarDay.jsx is being captured but this(<div onBlur={this.onBlur}>) in DayPickerRangeController.jsx

[tanmoyopenroot]

the reason for onBlur call inside onDayClick function in DayPickerRangeController is because of this.
We can pass custom renderCalendarDay which might not trigger blur event and on day click may unnecessary call onBlur if placed inside of onDayClick