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

Switch between years and months on DatePickerInput #579

Closed
bartpeeters opened this Issue Dec 3, 2017 · 13 comments

Comments

6 participants
@bartpeeters
Contributor

bartpeeters commented Dec 3, 2017

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

This comment has been minimized.

Owner

gpbl commented Dec 3, 2017

🤔 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

This comment has been minimized.

Contributor

bartpeeters commented Dec 3, 2017

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

This comment has been minimized.

Owner

gpbl commented Dec 4, 2017

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

This comment has been minimized.

Contributor

martinmosko commented Dec 4, 2017

@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 gpbl removed the user support 🚑 label Dec 4, 2017

@gpbl

This comment has been minimized.

Owner

gpbl commented Dec 4, 2017

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

This comment has been minimized.

Contributor

bartpeeters commented Dec 24, 2017

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

This comment has been minimized.

Owner

gpbl commented Jan 1, 2018

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

@mattfysh

This comment has been minimized.

mattfysh commented Jan 11, 2018

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

This comment has been minimized.

focused commented Jan 11, 2018

@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

This comment has been minimized.

mattfysh commented Jan 20, 2018

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

This comment has been minimized.

nathan-haines commented Feb 13, 2018

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

@mattfysh

This comment has been minimized.

mattfysh commented Feb 15, 2018

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

  <DayPickerInput ref={updateInputRef} ...
@gpbl

This comment has been minimized.

Owner

gpbl commented Mar 5, 2018

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

@gpbl gpbl closed this Mar 5, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment