Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Problem with focusing element in modals #340

Closed
One041 opened this issue Oct 26, 2024 · 2 comments
Closed

Problem with focusing element in modals #340

One041 opened this issue Oct 26, 2024 · 2 comments
Assignees

Comments

@One041
Copy link

One041 commented Oct 26, 2024

Hello. I tried to use the focus lock inside modals and stuck with a problem to focus element. Right now you need press the tab key twice to focus the first element in the modal. autoFocus was set to false since I don't want to focus any element until press the tab key. Is it possible to focus an element in modals with single tab?

Demo:

https://ping-roan.vercel.app/

Just click the "Open modal" button and try to focus any element.

Source code: https://github.com/One041/ping

@AlekseyManetov
Copy link

We encountered the same issue after updating from version 2.9.2 to 2.13.2. We are experiencing even more unusual behavior: once a modal with FocusLock is mounted, the user has to press the Tab key approximately the same number of times as there are active elements on the page following the modal toggle button.

I've created a CodeSandbox to demonstrate this issue: https://codesandbox.io/p/sandbox/kdcn3q

@theKashey Could you please take a look at this case? It seems quite critical.

AlekseyManetov added a commit to epam/UUI that referenced this issue Dec 9, 2024
…ary fix, because of bug in react-focus-lock lib(theKashey/react-focus-lock#340). Ideally focus should move to the first active element only after 'Tab' key was pressed, we will come back to this solution when bug will be fixed.
@theKashey theKashey self-assigned this Dec 15, 2024
theKashey added a commit that referenced this issue Dec 15, 2024
fix: correct focus order for non-autofocusable modals, fixes #340
@theKashey
Copy link
Owner

Sorry for a little late reaction. Indeed that was a bug introduced in the last release, hopefully affecting only autoFocus:false behavior.

I was not able to replicate it via unit tests, but was able to clearly reproduce in storybook following example provided by @AlekseyManetov, and then get it fixed.

2.13.5 should fix your problem.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants