Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add preventScroll to useFocusLock options #23

Open
mcsmcs opened this issue Jun 8, 2021 · 0 comments
Open

Add preventScroll to useFocusLock options #23

mcsmcs opened this issue Jun 8, 2021 · 0 comments

Comments

@mcsmcs
Copy link

mcsmcs commented Jun 8, 2021

Scenario
We're leveraging popper.js (specifically react-popper) to position different dialogs (Callout, Menus, etc) and focus-layers to trap focus within those dialogs.

When .focus() is called most browsers will attempt to scroll the element into view. The unfortunate part is that popper.js starts with position: absolute; top: 0; left: 0; and then in a subsequent render cycle applies a transform to position the element correctly.

When focus-layers calls .focus the element hasn't always made it to the correct position. Depending on the use case the top/left: 0 could be hundreds of pixels above the final placement causing the scroll to take the focus-lock'ed element completely off the screen.

Ask
The focus() method takes a preventScroll option that prevents the scrolling. Can useFocusLock options accept an option to control preventScroll?

Other
Version: [email protected]
https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/focus

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant