🐛 Resolve the double-click focus issue of Time input and custom time component example #5088
Conversation
…onent example - Manually trigger focus on Time input when received the click event to override the default behavior of the selected date tabIndex 0
![pullrequest[bot]](https://avatars.githubusercontent.com/in/3434?s=60&v=4){kind=small}
There was a problem hiding this comment.
✅ 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.
Codecov ReportAll modified and coverable lines are covered by tests ✅
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. |
There was a problem hiding this comment.
One possible typo, otherwise the pull request looks good to me and should resolve the issue.
Reviewed with ❤️ by PullRequest
| @@ -86,8 +88,12 @@ export default class InputTime extends Component< | |||
| <input | |||
| type="time" | |||
| className="react-datepicker-time__input" | |||
| placeholder="Time" | |||
| placeholder="Time1" | |||
There was a problem hiding this comment.
I merged before checking the comment, can you check this @balajis-qb
There was a problem hiding this comment.
Yes @martijnrusschen, as the current PR is already merged I'll create a new PR and comment the link in this conversation.
There was a problem hiding this comment.
#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.
There was a problem hiding this comment.
This change looks good to merge, one comment from the other reviewer looks worthwhile to look into.
Reviewed with ❤️ by PullRequest
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 -
showTimeInputwithshouldCloseOnSelectturned 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