🐛 Resolve the double-click focus issue of Time input and custom time component example

[balajis-qb]

Closes #4949

The Issue:

As I mentioned in the ticket, the issue is with the Time Input of the React Date Picker (both with the default Time Input - showTimeInput with shouldCloseOnSelect turned off and the Custom Time Input - customInput)

The issue is whenever we open the datepicker for the first time, and try to change the time before changing the date, now the time input won't get the focus and we need to do double click to get the focus. Then onwards, single click itself will bring the focus. The issue occurs only for the first update.

Why the issue occurs?

We are getting the issue because whenever we open the date picker, we auto-focus the selected date or the current date by setting it's tabIndex to 0 and all the other element's tab-index to -1. As a result we need to get the focus on other elements we need to click it twice. For all the other elements in the project, this case was handled by the manual highlight.

The Fix

I fixed the issue by manually setting the focus to the element whenever the time input got clicked and updated the corresponding test-cases.

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

+ 23
- 1

63% TSX (tests)
33% TSX
4% JavaScript

Type of change

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

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.89%. Comparing base (2629ce9) to head (41f180f).
Report is 2 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #5088   +/-   ##
=======================================
  Coverage   96.88%   96.89%           
=======================================
  Files          29       29           
  Lines        3343     3346    +3     
  Branches     1403     1405    +2     
=======================================
+ Hits         3239     3242    +3     
+ Misses        104      102    -2     
- Partials        0        2    +2     

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

[pullrequest]

One possible typo, otherwise the pull request looks good to me and should resolve the issue.

Jacob

---

Reviewed with ❤️ by PullRequest

[pullrequest]

Is this intentional? It feels like it could be a typo.

🔸 Spelling/Typo (Important)

Jacob

[martijnrusschen]

I merged before checking the comment, can you check this @balajis-qb

[balajis-qb]

Yes @martijnrusschen, as the current PR is already merged I'll create a new PR and comment the link in this conversation.

[balajis-qb]

#5092 @martijnrusschen, I created this PR to fix the typo. Please review and merge this PR or let me know if you need any changes.

[pullrequest]

This change looks good to merge, one comment from the other reviewer looks worthwhile to look into.

Jacques

---

Reviewed with ❤️ by PullRequest