Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 2 commits into
base: master
from

Conversation

@tanmoyopenroot
Copy link

tanmoyopenroot commented Feb 7, 2020

PR checklist

  • Addresses an existing issue: fixes #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.

Copy link
Collaborator

ljharb left a comment

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?

const wrapper = shallow(<DayPicker onBlur={onBlurStub} />);
expect(wrapper.prop('onBlur')).to.equal(onBlurStub);
wrapper.prop('onBlur')();
expect(onBlurStub.callCount).to.equal(1);

This comment has been minimized.

Copy link
@ljharb

ljharb Feb 7, 2020

Collaborator
Suggested change
expect(onBlurStub.callCount).to.equal(1);
expect(onBlurStub).to.have.property('callCount', 1);
it('should pass onBlur to <DayPicker />', () => {
const onBlurStub = sinon.stub();
const wrapper = shallow(<DayPicker onBlur={onBlurStub} />);
expect(wrapper.prop('onBlur')).to.equal(onBlurStub);

This comment has been minimized.

Copy link
@ljharb

ljharb Feb 7, 2020

Collaborator
Suggested change
expect(wrapper.prop('onBlur')).to.equal(onBlurStub);
expect(wrapper.props()).to.have.property('onBlur', onBlurStub);
@tanmoyopenroot

This comment has been minimized.

Copy link
Author

tanmoyopenroot commented Feb 8, 2020

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

This comment has been minimized.

Copy link
Collaborator

ljharb commented Feb 8, 2020

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

This comment has been minimized.

Copy link
Author

tanmoyopenroot commented Feb 9, 2020

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?

@@ -668,8 +675,6 @@ export default class DayPickerRangeController extends React.PureComponent {
} else {
onDatesChange({ startDate, endDate });
}

onBlur();

This comment has been minimized.

Copy link
@ljharb

ljharb Feb 9, 2020

Collaborator

removing this call is a breaking change

This comment has been minimized.

Copy link
@tanmoyopenroot

tanmoyopenroot Feb 10, 2020

Author

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

This comment has been minimized.

Copy link
@tanmoyopenroot

tanmoyopenroot Feb 10, 2020

Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

2 participants
You can’t perform that action at this time.