When autoFocus=false, it takes two "tab" presses to focus on the first element in the trap.

[dylanfpaul]

Is this the expected behaviour? Is there a way to not automatically focus and also only take 1 tab press to start focusing something?

[theKashey]

Without autofocus enabled it will be kept "as is" and corresponding logic will be fired only on focus change. It should not take two tabs, but there are no guarantees that the first element will be focused on activation - actually with more probability it will be the last.

This is how internal logic works - it compares activeElement and FocusLock boundaries and if focus is found "before" it thinks you did shift+tab

Long story short - can you please clarify your use case?

[jeremydrichardson]

I'm having the same issue and hopefully can elaborate a little.

We have a drawer component that uses FocusOn needs to load on pageload. There are 2 buttons in this drawer.

First case

1. Drawer is set to open automatically on page load
2. Reload the page
3. The first button is automatically highlighted with the accessibility outline

Second case

1. Drawer is not visible when page first loads
2. Press a button to trigger the drawer
3. The first button is NOT automatically highlighted with outline
4. Click tab once and the first button is then outlined

Third case

1. Drawer is set to open automatically on page load
2. FocusOn has the autoFocus prop set to false
3. Reload page
4. Hit tab once, nothing happens
5. Hit tab again, then the first button is outlined

Desired outcome

Drawer load automatically on page load and have no buttons outlined until a user hits tab once.

[stale[bot]]

This issue has been marked as "stale" because there has been no activity for 2 months. If you have any new information or would like to continue the discussion, please feel free to do so. If this issue got buried among other tasks, maybe this message will reignite the conversation. Otherwise, this issue will be closed in 7 days. Thank you for your contributions so far.