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

[balajis-qb]

Closes Hacker0x01#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.