Lock focusing on first focusable element when drawer component is closed

[jamestalmond]

I've got a strange issue which involves a focusable element being out of view within a dismissable container. See the screen recording below followed by an explanation:

https://github.com/user-attachments/assets/e7afc010-e20b-4485-9941-a863787d881c

• User opens the drawer
• User goes to dismiss the drawer
• On mouse click (not release, finger still pressing the mouse click down), the user is jumped down to the first focusable element (a button in this case)
• On mouse click release, the drawer is dismissed as expected
• On drawer reopen, the user is back at the top of the drawer as expected and the same process is repeated

My onClick function to dismiss the drawer isn't doing anything fancy, just setting state in React which shows and hides the drawer.

The issue disappears when the focus lock is removed from the component entirely. The problem doesn't occur if the first focusable element is within view.

I'm using autofocus={false} on the focus lock, but that doesn't solve the problem.

Any thoughts?

[theKashey]

This could be related to the "scroll on focus" browser behaviour. Please try setting focusOptions={{ preventScroll: true }} to the Lock.

focusOptions marked as @deprecated only to inform you to be careful.

[jamestalmond]

Looks like this fixed it! Thanks!