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

Cannot read property 'focus' of undefined in DayPicker #630

Closed
speicus opened this Issue Feb 22, 2018 · 7 comments

Comments

3 participants
@speicus

speicus commented Feb 22, 2018

Steps to reproduce:

  1. Open https://codesandbox.io/s/23vz0vrn7r
  2. DayPicker will display December, 2018
  3. Click on January 5, 2019 (with is also displayed because of showOutsideDays is true).
  4. Press left cursor key.

Result: An arrow is thrown: "Cannot read property 'focus' of undefined"
Expected result: the focus moves from January 5 to January 4.

daypicker-focus

@gpbl gpbl added the bug:minor label Feb 22, 2018

@gpbl

This comment has been minimized.

Owner

gpbl commented Feb 22, 2018

Thanks for the report!

@gpbl gpbl added this to the next patch milestone Feb 23, 2018

@gpbl gpbl added v:patch and removed src:TypeScript labels Feb 23, 2018

@gpbl gpbl removed this from the next patch milestone Feb 23, 2018

@gpbl

This comment has been minimized.

Owner

gpbl commented Feb 25, 2018

So this is a special case when the "outside" day falls out of the toMonth/fromMonth months. I'm thinking maybe we should just hide the day (i.e. not displaying it at all)?

@gpbl

This comment has been minimized.

Owner

gpbl commented Feb 25, 2018

This would be the result:

screen shot 2018-02-25 at 10 17 13

gpbl added a commit that referenced this issue Feb 25, 2018

@gpbl gpbl closed this in #639 Feb 25, 2018

@lohmatiy-lapa

This comment has been minimized.

lohmatiy-lapa commented Feb 26, 2018

This behaviour can be reproduced without fromMonth/toMonth options. toMonth option is used in the example only to easily reproduce focus on the outside day. But outside day may got focus also by mouse button down event on day, then move mouse outside the day-picker component to any area without focus holding the button and then release the mouse button. But this is hard to describe, so in the example used toMonth to prevent month change to be able focus on day just by click event on it. There is gif with reproduce without using toMonth:
focus_issue

By the way the same error could be reproduced for outside day before current month also by focus on it and press left cursor button:
focus_issue_before_month

Also there is strange behaviour when focusing outside day after month and then pressing right cursor button:
focus_issue_after_month_right_button

So the real reason of the issue is still exists. And also I think that hiding outside days in the border cases is not clear solution.

@speicus

This comment has been minimized.

speicus commented Feb 26, 2018

Basically, what @lohmatiy-lapa said. The issue is still there, and from what I understand, can be fixed by modifying this line: https://github.com/gpbl/react-day-picker/blob/master/src/DayPicker.js#L305

There's actually a lot of places in DayPicker.js where dayNodes is accessed by index without checking if that index exists. @gpbl, please consider reopening this — I believe this can be easily fixed by adding additional checks.

@speicus

This comment has been minimized.

speicus commented Feb 26, 2018

As to hiding the days which fall out from toMonth / fromMonth — I think it’s a great idea.

@gpbl gpbl reopened this Mar 4, 2018

@gpbl gpbl closed this in #646 Mar 5, 2018

@gpbl gpbl added this to the v7.1.0 milestone Mar 5, 2018

@gpbl

This comment has been minimized.

Owner

gpbl commented Mar 5, 2018

Published as v7.1.0.

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