Password > Icon and Input render order > tabIndex issue

[cbaum86]

Describe the bug

Previously (<= v10.6.3) if using the Password component with the toggleMask prop when the component was rendered in the DOM, tabbing through a form the input component would be tabbed to first and then the toggleMask secondary.
However, now the Password component renders differently and the toggleMask is tabbed to first, followed by the input secondary.
This feels like bad user experience.

Reproducer

https://react-cmjtr2.stackblitz.io

PrimeReact version

10.6.5

React version

18.x

Language

ES6

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

1. Click in the html doc
2. Press the keyboard 'tab' key
3. ToggleMask element is focused
4. Press the keyboard 'tab' key again
5. The password input is focused

Expected behavior

1. Click in the html doc
2. Press the keyboard 'tab' key
3. Password input is focused
4. Press the keyboard 'tab' key again
5. ToggleMask element is focused

Expected behaviour can be seen by changing the primereact library version to 10.6.3 or lower.

[melloware]

Agreed it should work the same as far as tabbing goes.