tabindex="-1" on last element prevents Tab key from cycling back to the top about react-focus-lock HOT 6 CLOSED

Should be fixed in 1.13.2

from react-focus-lock.

I'll check. Something is very wrong, as long I could not find any reason for this strange behavior.

from react-focus-lock.

Thanks very much @theKashey ! I have some further clarification of the error scenario that we are encountering:

If the last tabbable link in the modal is within a parent that has display: none and the link does not have tabindex="-1" explicitly specified, then the focus cycle gets stuck, although browser does not tab to this link (since it is hidden).

Example:

Scenario 1: ❌ Focus stuck at #link1

<FocusLock>
  ...
  <a id="link1">Test</a>
  <div style="display: none;">
    <a id="link2">Test</a>
  </div>
</FocusLock>

Scenario 2: ✅ Cycles back to top as expected

<FocusLock>
  ...
  <a id="link1">Test</a>
  <div style="display: none;">
    <a id="link2" tabindex="-1">Test</a>
  </div>
</FocusLock>

Scenario 3: ❌ Focus stuck at #link1

<FocusLock>
  ...
  <a id="link1">Test</a>
  <div style="display: none;">
    <a id="link2">Test</a>
  </div>
  <a id="link3" tabindex="-1">Test</a> /* This cannot be tabbed to */
</FocusLock>

Scenario 4: ✅ Cycles back to top as expected

<FocusLock>
  ...
  <a id="link1">Test</a>
  <div style="display: none;">
    <a id="link2">Test</a>
  </div>
  <a id="link3">Test</a>
</FocusLock>

from react-focus-lock.

Yep, I've found the problem already - underlaying logic removes tabindex=-1 elements from two lists - "my" focusable elements, and the "rest" focusable elements.
Meanwhile it also has a logic about removing invisible (you forgot input type=hidden) elements, but it work only one list, not for another.
Result - 💣 💥

from react-focus-lock.

🙏 Thank you @theKashey ! Your patch works like a charm!

from react-focus-lock.

Thank you in response. You helped to find and close quite important issue.

from react-focus-lock.