[terra-tabs] Fixed keyboard navigation for draggable tabs #1848
Conversation
| @@ -230,6 +230,10 @@ const Tab = ({ | |||
| onChange(event, itemKey); | |||
| } | |||
| } | |||
| // Fix for keyboard navigation after mouse click which was failing due to draggable props. | |||
| if (isDraggable) { | |||
| event.currentTarget.focus(); | |||
There was a problem hiding this comment.
so now the focus always remains on the dragged tab ? and once dropped the keyboard navigation starts from that position ?
There was a problem hiding this comment.
Before the change when a draggable tab was clicked, the focus was going onto the main or the body div due to the draggable props of the dnd library(exact prop/cause unknown as we spread a variable provided by the library). So I have put the focus on the clicked tab. This change has nothing to do with whether the tab has been dragged or not.
|
@saket2403 does the arrow navigation works fine when the isdraggable prop is false ? |
Yes it works fine in non draggable tabs because when tab is clicked the focus is on the tab. |
Summary
Fixed keyboard navigation for draggable tabs failing due to draggable props from react beautiful dnd.
What was changed:
Tab was focused programmatically to fix the issue.
Why it was changed:
Arrow Key navigation was failing because of the focus not being on the tab after mouse click.
Testing
This change was tested using:
Reviews
In addition to engineering reviews, this PR needs:
Additional Details
This PR resolves:
UXPLATFORM-9761
Thank you for contributing to Terra.
@cerner/terra