fix(Daypicker): add blur handler to capture all blur events #1924
Conversation
test/components/DayPicker_spec.jsx
Outdated
| const wrapper = shallow(<DayPicker onBlur={onBlurStub} />); | ||
| expect(wrapper.prop('onBlur')).to.equal(onBlurStub); | ||
| wrapper.prop('onBlur')(); | ||
| expect(onBlurStub.callCount).to.equal(1); |
There was a problem hiding this comment.
| expect(onBlurStub.callCount).to.equal(1); | |
| expect(onBlurStub).to.have.property('callCount', 1); |
test/components/DayPicker_spec.jsx
Outdated
| it('should pass onBlur to <DayPicker />', () => { | ||
| const onBlurStub = sinon.stub(); | ||
| const wrapper = shallow(<DayPicker onBlur={onBlurStub} />); | ||
| expect(wrapper.prop('onBlur')).to.equal(onBlurStub); |
There was a problem hiding this comment.
| expect(wrapper.prop('onBlur')).to.equal(onBlurStub); | |
| expect(wrapper.props()).to.have.property('onBlur', onBlurStub); |
Could you please clarify it for me? |
|
Someone who is currently passing |
ok, I will fix it. |
| @@ -668,8 +675,6 @@ export default class DayPickerRangeController extends React.PureComponent { | ||
| } else { | ||
| onDatesChange({ startDate, endDate }); | ||
| } | ||
|
|
||
| onBlur(); |
There was a problem hiding this comment.
removing this call is a breaking change
There was a problem hiding this comment.
But blur event from CalendarDay.jsx is being captured but this(<div onBlur={this.onBlur}>) in DayPickerRangeController.jsx
There was a problem hiding this comment.
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
PR checklist
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.