You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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?
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 atransform
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: focus-layers@0.6.1
https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/focus
The text was updated successfully, but these errors were encountered: