Fix #5147: 🐛 Fix navigation issue with disabled dates in date picker #5151

balajis-qb · 2024-10-09T06:36:48Z

Problem
As I described in the linked ticket, the issue is if we select a date and disable the same date in the next or previous months, then when we navigate to the corresponding month and try using arrow keys (Tab) to navigate to the date, it won't work as there is no pre-selected date available in the month due to the fact that the corresponding date we selected previously is disabled in the corresponding month.

Changes

Whenever month gets switched, instead of auto-preselecting the already selected day from the selected date. I first checked if the same day in the month is disabled, if not pre-select the same day, else pre-select the first enabled date in the month. If all the days are disabled in the rendered month, didn't pre-select any days.

Contribution checklist

I have followed the contributing guidelines.
I have added sufficient test coverage for my changes.
I have formatted my code with Prettier and checked for linting issues with ESLint for code readability.

pullrequest

✅ This pull request was sent to the PullRequest network for review. Expert reviewers are now being matched to your request based on the code's requirements. Stay tuned!

What to expect from this code review:

Comments posted to any areas of potential concern or improvement.
Detailed feedback or actions needed to resolve issues that are found.
Turnaround times vary, but we aim to be swift.

@balajis-qb you can click here to see the review status or cancel the code review job.

pullrequest

PullRequest Breakdown

Reviewable lines of change

+ 144
- 3

74% TSX (tests)
26% TSX

Type of change

Fix - These changes are likely to be fixing a bug or issue.

pullrequest

Other than the nit about using safeQuerySelector where appropriate, the change and tests look solid.

Jacob

Reviewed with ❤️ by PullRequest

pullrequest · 2024-10-09T07:12:05Z

src/test/calendar_test.test.tsx

+        const input = safeQuerySelector<HTMLInputElement>(container, "input");
+        fireEvent.focus(input);
+
+        const nextButton = container.querySelector(


ISSUE: @typescript-eslint/no-non-null-assertion (Severity: Low)
Forbidden non-null assertion.

Remediation:
There is safeQuerySelector tucked away in src/test/test-utils.ts which should be preferred in situations like this. It ensures that the element is actually present rather than merely asserting that it is. It's already in scope (used just a couple lines above this), so you should be able to use it without issue.

🤖 powered by PullRequest Automation 👋 verified by Jacob

Escape hatches in TypeScript, such as type assertions and the any type, are generally more permissible in test code where they can be more productive without many downsides.

However, as was pointed out, since there is a utility function in scope, it seems reasonable to just use that instead.

Ryan

Thank you for the catch. Sorry, I accidentally used it in one test case and copied the same to the other test cases. I fixed it now.

pullrequest

These changes addressing the navigation issue outlined in #5147 look good to me overall. I don't see any issues with the approach and it's great that enough tests were added to properly simulate what this is addressing.

Nice work.

Ryan

Reviewed with ❤️ by PullRequest

pullrequest

The latest changes to remove the use of the non-null assertion operator look good to me.

Ryan

Reviewed with ❤️ by PullRequest

martijnrusschen · 2024-10-09T09:28:51Z

The test suite is failing, please check on any issues.

- Resolved the issue where navigating to a month with a previously selected date that is now disabled prevents using arrow keys (Tab) to navigate - Fixed by pre-selecting the first enabled date in the same month. Closes Hacker0x01#5147

codecov · 2024-10-09T10:37:04Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.91%. Comparing base (76fea24) to head (c2210dd).
Report is 15 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #5151      +/-   ##
==========================================
+ Coverage   96.89%   96.91%   +0.01%     
==========================================
  Files          29       29              
  Lines        3350     3366      +16     
  Branches     1405     1396       -9     
==========================================
+ Hits         3246     3262      +16     
  Misses        104      104

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

balajis-qb · 2024-10-09T10:37:56Z

@martijnrusschen, I reinstalled the packages and fixed this code formatting issue. This PR is now safe to be merged.

pullrequest

The latest CI checks only indicate existing warnings, so everything seems fine here.

Thanks again for your contribution @balajis-qb! Very appreciated.

Ryan

Reviewed with ❤️ by PullRequest

pullrequest bot reviewed Oct 9, 2024

View reviewed changes

pullrequest bot approved these changes Oct 9, 2024

View reviewed changes

balajis-qb force-pushed the issue-5147/fix/date-navigation-issue branch from 8b57551 to 9fa76c2 Compare October 9, 2024 09:20

pullrequest bot reviewed Oct 9, 2024

View reviewed changes

pullrequest bot approved these changes Oct 9, 2024

View reviewed changes

balajis-qb force-pushed the issue-5147/fix/date-navigation-issue branch from 205d9cd to abf6f0a Compare October 9, 2024 10:14

balajis-qb force-pushed the issue-5147/fix/date-navigation-issue branch from abf6f0a to 554671d Compare October 9, 2024 10:26

🐛 Fix Prettier formatting issue

c2210dd

balajis-qb force-pushed the issue-5147/fix/date-navigation-issue branch from 554671d to c2210dd Compare October 9, 2024 10:35

pullrequest bot reviewed Oct 9, 2024

View reviewed changes

pullrequest bot approved these changes Oct 9, 2024

View reviewed changes

martijnrusschen merged commit b1fcedf into Hacker0x01:main Oct 15, 2024
6 checks passed

omaration21 mentioned this pull request Nov 8, 2024

[Snyk] Upgrade react-datepicker from 7.4.0 to 7.5.0 omaration21/sandersapp#15

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix #5147: 🐛 Fix navigation issue with disabled dates in date picker #5151

Fix #5147: 🐛 Fix navigation issue with disabled dates in date picker #5151

balajis-qb commented Oct 9, 2024

pullrequest bot left a comment

pullrequest bot left a comment •

edited

Loading

pullrequest bot left a comment

pullrequest bot Oct 9, 2024

pullrequest bot Oct 9, 2024

balajis-qb Oct 9, 2024

pullrequest bot left a comment

pullrequest bot left a comment

martijnrusschen commented Oct 9, 2024

codecov bot commented Oct 9, 2024 •

edited

Loading

balajis-qb commented Oct 9, 2024

pullrequest bot left a comment

Fix #5147: 🐛 Fix navigation issue with disabled dates in date picker #5151

Fix #5147: 🐛 Fix navigation issue with disabled dates in date picker #5151

Conversation

balajis-qb commented Oct 9, 2024

Contribution checklist

pullrequest bot left a comment

Choose a reason for hiding this comment

pullrequest bot left a comment • edited Loading

Choose a reason for hiding this comment

PullRequest Breakdown

pullrequest bot left a comment

Choose a reason for hiding this comment

pullrequest bot Oct 9, 2024

Choose a reason for hiding this comment

🤖 powered by PullRequest Automation 👋 verified by Jacob

pullrequest bot Oct 9, 2024

Choose a reason for hiding this comment

balajis-qb Oct 9, 2024

Choose a reason for hiding this comment

pullrequest bot left a comment

Choose a reason for hiding this comment

pullrequest bot left a comment

Choose a reason for hiding this comment

martijnrusschen commented Oct 9, 2024

codecov bot commented Oct 9, 2024 • edited Loading

Codecov Report

balajis-qb commented Oct 9, 2024

pullrequest bot left a comment

Choose a reason for hiding this comment

pullrequest bot left a comment •

edited

Loading

codecov bot commented Oct 9, 2024 •

edited

Loading