Executing onBlur function on months navigation buttons

[phlex89]

Jump to relevant #600 (comment)

---

I want to hide the DayPicker to onBlur but it is triggering also when I click on navigation buttons.

How can I fix this?

[gpbl]

It hides already when the input blurs... please add a codesandbox to reproduce, thanks!

[phlex89]

I don't use DayPickerInput, I just use DayPicker showing and hiding it "manually" so I would like to trigger the "custom hide" function on onBlur but it triggers also if I click on months navigation buttons.

[gpbl]

@phlex89 sorry I don't follow :) Which is the element firing the blur event? The DayPicker? Please add a CodeSandbox to reproduce your issue, thanks: https://codesandbox.io/s/XDAE3x0W8

[phlex89]

I just added an onBlur function to DayPicker: https://codesandbox.io/s/93q14zxwl4

You can see the function is triggering also on months navigation buttons.

[gpbl]

Thanks for the follow up. Sadly, the blur event works this way. I suggest you to find another way to hide the calendar that's not relying on the blur event.

[petergombos]

I'm having the same problem, onBlur seems to fire when there is no day selected yet and the user is paginating the months. In many form libs this makes the field marked as 'touched' and since it has no value it shows invalid. Any suggestions?

[paulcredmond]

+1. Same issue as with @petergombos

It's a common approach to use onBlur() to check if the user has entered a date before leaving the field for validation, but this fires when navigating the calendar.

[gpbl]

reopened ! i’ll look on it again!

[paulcredmond]

Hi @gpbl did you get a chance to look at this? Many thanks!

[petergombos]

@paulcredmond this is a dirty hack I use as a workaround in the meantime