[FocusTrap] Wrong tab order when `tabIndex >= 1` (original) (raw)

Latest repro

https://stackblitz.com/edit/yzacyhka?file=src%2FDemo.tsx

Open various popups via the triggers, e.g. Dialog, FocusTrap. The 2nd row are components unaffected by the issue and included for comparison.
Press Tab once
The "Normal" button is incorrectly focused, the "Indexed" button should receive first focus because of tabIndex={1}

Duplicates

I have searched the existing issues

Latest version

I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/eager-mopsa-tk86fq?file=/src/App.js

Both MUI's FocusTrap and focus-trap-react are added to the sandbox for ease of reproducing the case.

Current behavior 😯

Ordering seems to be wrong.

Expected behavior 🤔

Having multiple focusable elements inside FocusTrap with different tabindeces, when the FocusTrap is focused the order should start from any item which has the index upper than 0, looping till the > 0 items are done and then reach to the items with normal 0 tabindex.

Example is:

normal 1 indexed 3 indexed 2 normal 2 indexed 1 normal 3

Focusing order should be:

indexed 1
indexed 2
indexed 3
normal 1
normal 2
normal 3

But MUI's behavior is:

normal 1 
normal 2
normal 3
indexed 1
indexed 2
indexed 3

The behavior of focus-trap and focus-trap-react seems to be right.

Possible related line of code:

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[FocusTrap] Wrong tab order when tabIndex >= 1 (original) (raw)