React-day-picker: Executing onBlur function on months navigation buttons

[phlex89]

Jump to relevant https://github.com/gpbl/react-day-picker/issues/600#issuecomment-355964462

---

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

[paulcredmond]

Oh, I see what you did there @petergombos

Thanks, I'll use that.

[gpbl]

@paulcredmond

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

Not yet, sorry!

[apalanki]

A good check to place in onBlur is the source of events

 onBlur = (event) => {
        if (!(event.relatedTarget && event.relatedTarget.classList.contains('DayPicker-Day'))) {
               // The navigation button events are filtered by ^ check
          }
}

[paulcredmond]

@apalanki Thanks, this works fine for me.

      if (!e.relatedTarget) {
         this.setState({
            firstPass: true // Used for validation.
         });
      }

[gpbl]

I'd like to look at this again but I'm not sure I understand your problem:

https://codesandbox.io/s/93q14zxwl4

1. I click the May 2018 header
2. the wrapper element (.DayPicker-wrapper) get the focus
3. now I click the arrows to change the month
4. the wrapper element loses the focus and calls onBlur

What you don't like here is the last step, i.e. you are saying we shouldn't call onBlur here. Am I understanding this right? In which case this behaviour gives you problems?

[nmchaves]

What you don't like here is the last step, i.e. you are saying we shouldn't call onBlur here?

@gpbl Exactly! This last step makes it more difficult to use form validation.

Let's say you wrap the <DayPicker/> inside a form and use a form validation library to enforce that the date field is required. In many cases, it's best to trigger the validation on blur. If the user ever clicks _away_ from the day picker wrapper before selecting a value, it's best to give the user immediate feedback that the field is required.

However, we don't want to trigger the validation when the user interacts with the month pagination. After all, the user is still interacting with the day picker at that point, so it doesn't make sense to display an error.

In other words, it would be better if onBlur only got called when the user interacted with something _outside_ of the day picker.

In the case of a <DayPickerInput/>, it would also be nice if onBlur did _not_ get called when the user interacted with the input element. I haven't actually tested the <DayPickerInput/> blurring though, so it might already behave like this.

[Kamilius]

Just got a problem with same thing.

@gpbl the main issue here, is that when I'm using DayPicker already reproduced in sandbox above:

• by clicking Previous month button in DayPicker's header, it calls onBlur for whole DayPicker component. (Intended behavior? How's that?) That means, if I somehow need to know if DayPicker itself triggered onBlur, it's non-reliable, as it'll call blur not only on day select, but on each clicked button each time.
• Using multiple DayPickers inside same group (ex. entering StartDate/EndDates separately), forces us to rely onBlur to fix issue described here https://github.com/gpbl/react-day-picker/issues/926

So issue with onBlur being triggered on not only days inside of a calendar, but each buttons, for me specifically is a blocker, as makes DayPicker non-usable when it comes to using more than one DayPicker on a page

[gpbl]

Closing, as that input component is bugged since too long and it will be removed from the next version.