Latest repro

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

• Open the Dialog or FocusTrap
• 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:

<button> normal 1</button>
<button tabindex='3'> indexed 3 </button>
<button tabindex='2'> indexed 2 </button>
<button> normal 2</button>
<button tabindex='1'> indexed 1 </button>
<button> normal 3</button>

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 🌎

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