(bug) [React]: Focus trap doesn't keep focus when tabbing to element with tabIndex outside of the Dialog #1656
Assignees
Comments
|
Hey! Thank you for your bug report! Just for future reference, this doesn't look like a Transition related issue but a Dialog/FocusTrap issue because if you remove the Transition altogether the issue is still there. Updated CodeSandbox: https://codesandbox.io/s/jolly-scott-zofw49?file=/src/App.js |
RobinMalfait
changed the title
RobinMalfait
added a commit
that referenced
this issue
Dec 14, 2022
This code will now ensure that we can't escape the FocusTrap if you use `<tab>` and you happen to tab to an element outside of the FocusTrap because the next item in line happens to be outside of the FocusTrap and we never hit any of the focus guard elements. How it works is as follows: 1. The `onBlur` is implemented on the `FocusTrap` itself, this will give us some information in the event itself. - `e.target` is the element that is being blurred (think of it as `from`) - `e.currentTarget` is the element with the event listener (the dialog) - `e.relatedTarget` is the element we are going to (think of it as `to`) 2. If the blur happened due to a `<tab>` or `<shift>+<tab>`, then we will move focus back inside the FocusTrap, and go from the `e.target` to the next or previous value. 3. If the blur happened programmatically (so no tab keys are involved, aka no direction is known), then the focus is restored to the `e.target` value. Fixes: #1656
|
Hey! Sorry that this took a while... but this should be fixed by #2093, and will be available in the next release. You can already try it (in a few minutes) using:
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
What package within Headless UI are you using?
@headlessui/react
What version of that package are you using?
v1.6.6
What browser are you using?
Chrome
Reproduction URL
Minimum reproducible example on CodeSandbox
Describe your issue
The
Transitioncomponent loses the focus trap when elements ofDialogcontain atabIndex.Go to the CodeSandbox, click Open Me, tab through the buttons and see that I'm another button gains focus. This issue is not present if
tabIndexis not present. If this is expected behavior, it seems to break the ability to define which elements are tabbed in order.The text was updated successfully, but these errors were encountered: