[feature request] `preventScroll` Option on Focus Override
See original GitHub issueDescription of Feature
Currently, react-focus-lock allows you to pass in focus options (including preventScroll: true) to the returnFocus prop (see https://github.com/theKashey/react-focus-lock/pull/84 and https://github.com/theKashey/focus-lock/pull/23). I am looking for a prop to add focus options to the logic that brings focus back to the focus lock when a focus event occurs outside of the focus lock.
Use-Case
I am creating a Popover component that uses react-focus-lock that opens when an anchor/reference button is clicked. When the Popover is open, the user is able to scroll around the page. If the user scrolls to the point where the Popover is out of view and then clicks on a button outside of the Popover, some browsers (including Chrome) scroll back to the open Popover. The reason is that some browsers focus a button on mousedown, which I’m assuming causes the focus lock inside of the Popover to grab focus again. I would like to disable scrolling when this Popover focus event occurs using preventScroll: true.
Example
Here is a small example of the scroll behavior: https://codesandbox.io/s/react-focus-lock-prevent-scroll-1hjn3?file=/src/App.js
To reproduce:
- Make sure the focus lock is enabled (see button at the top)
- Scroll down to the bottom of the page
- Click and hold on the button called “Button outside of focus lock” to trigger the
mousedownevent. - Chrome will scroll back to the top of the page where the focus lock is. I want to be able to prevent this part of the reproduction.
Issue Analytics
- State:
- Created 2 years ago
- Reactions:6
- Comments:7 (6 by maintainers)

Top Related StackOverflow Question
@theKashey We would need to merge this PR & release react-focus-lock again for the changes to get in.
The react-focus-lock is taking in the previous version of focus-lock.
@abhimanyu-singh-uber - thank you for the implementation. I’ll handle the rest