fix(16991): fix keyboard navigation's focus lock issue in DatePicker #17154
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #16991
This PR fixes keyboard navigation issue with DatePicker: Now focus moves out of datePicker to the next focusable element in the DOM on Tab key press
Changelog
Adds to
useEffect
to remove the focus from calendar on Tab keyIt checks if the pressed key is '
Tab
' (without Shift) and if theendInputField
is focused and that the calendar isopen
If the condition matches : It close the calendar and remove focus from the
endInputField
Testing / Reviewing
Select the dates using keyboard after selection of end date press tab and verify that the focus moves to the next focusable element in the DOM