Switch between years and months on DatePickerInput

[bartpeeters]

When modifying the "Switch between years and months" example to use a DatePickerInput with dayPickerProps, the month and year selects do not properly open.

If you set showOverlay to true the selects do open, but as soon as you select a day and then reopen it the selects do no longer open. Is this a css issue?

Codesandbox: https://codesandbox.io/s/l5991q6x9z

[gpbl]

🤔 It should because these lines:

https://github.com/gpbl/react-day-picker/blob/master/src/DayPickerInput.js#L299-L302

I have no idea how to prevent this. Maybe intercepting some of the blur/click events? Need some time to investigate it.

[bartpeeters]

Thanks for the quick response.

The blur event you linked is indeed causing this behavior, commenting out the lines you linked fixes the problem.

I don't really get why these lines are necessary, it seems to work nicer when they are commented out: no flicker every time you click inside the DayPicker.

Another way to fix this may be using event.relatedTarget to check if one of the custom elements originated the blur event. But I don't know how you could differentiate the custom elements from all the other elements in the DayPicker.

[gpbl]

I don't really get why these lines are necessary, it seems to work nicer when they are commented out: no flicker every time you click inside the DayPicker.

Those line were added by @martinmosko in https://github.com/gpbl/react-day-picker/pull/525/files
Maybe we could find another solution for the bug.

I'm also not happy with the flickering :)

[martinmosko]

@gpbl @bartpeeters

well use case is part of PR description. I tried to solve this issue so probably right solution will be to work with other timeout usages to set them correctly together (some how).

Issue:

1. Open Firefox (its not an issue in chrome) https://codesandbox.io/s/XDAE3x0W8
2. Click on day picker input (it shows calendar)
3. Click on navigation bar element (next, prev or nav title elements)
4. Main day picker input loses own focus and calendar stays open
5. Now when you click anywhere outside of calendar. Calendar is still open but is should close.

Solution:

Looks like the problem in FF is just timing of this.input.focus(); call. This fix is solving the issue.

[gpbl]

thanks for dropping by @martinmosko ! no idea yet how we could fix that firefox bug in another way.

Sure i hope to not introduce other timeouts since they make things unpredictable 😌

[bartpeeters]

I played around with the firefox issue and I propose another way to solve this: calling the onBlur event of the input when the onBlur of the Overlay happens.

Implementation, let me know what you guys think.

[gpbl]

@bartpeeters it could work – could you open a PR? Thanks!

[mattfysh]

Hey guys, I appreciate all the effort that's gone into this fix. I'm just wondering if there's quick temporary solution where we can disable the .focus() behaviour for now? Perhaps as a react-day-picker option?

[focused]

@bartpeeters, thank you for the real example. This is such a common case to have an input with attached calendar dropdown and year/month selects. Good example should cover the most common composition of existing subcomponents. Just a particle of my own criticism. Love you for your work.

[mattfysh]

ended up using this:

// hack workaround for https://github.com/gpbl/react-day-picker/issues/579
  updateInputRef = ref => {
    if (ref) {
      // eslint-disable-next-line
      ref.input.focus = function() {}
    }
  }

[nathan-haines]

@mattfysh could you elaborate a little more on where you put that? Im running into the same issue

[mattfysh]

@nathan-haines you need to grab a ref to the DayPickerInput component:

  <DayPickerInput ref={updateInputRef} ...

[gpbl]

This issue has been fixed in #598 (publishing it soon)!