react-focus-lock icon indicating copy to clipboard operation
react-focus-lock copied to clipboard

Published 20 hours ago • verified publisher icon theKashey

Focus Lock navigation breaks with multiple tabIndex="-1" wrappers

Open siarhei-epam opened this issue 5 months ago • 2 comments
trafficstars

Issue Description

When using react-focus-lock, the focus navigation within a dialog breaks when a focusable component that displays the dialog is wrapped in a component with tabIndex="-1", and the component following it is also wrapped in a component with tabIndex="-1".

The focus navigation is not calculated correctly and gets stuck in a loop, returning to the starting component instead of cycling through all focusable elements.

Steps to Reproduce

  1. Open the CodeSandbox demo
  2. Click the "Open modal 1" button to open the dialog
  3. Press "Tab" twice or more
  4. Observe that the focus does not move and is stuck in a loop

Expected Behavior

Focus should move in a cycle through all focusable components within the dialog.

Environment

  • react-focus-lock version: 2.13.5
  • React version: (as specified in the CodeSandbox)

Location of the error

https://github.com/theKashey/focus-lock/blob/ab0a54559ab3db3ce53fbe82fe73abe3475027d1/src/solver.ts#L98

siarhei-epam avatar May 27 '25 17:05 siarhei-epam