question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[feature request] `preventScroll` Option on Focus Override

See original GitHub issue

Description 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:

  1. Make sure the focus lock is enabled (see button at the top)
  2. Scroll down to the bottom of the page
  3. Click and hold on the button called “Button outside of focus lock” to trigger the mousedown event.
  4. 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:closed
  • Created 2 years ago
  • Reactions:6
  • Comments:7 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
abhimanyu-singh-ubercommented, Dec 13, 2021

@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.

1reaction
theKasheycommented, Nov 27, 2021

@abhimanyu-singh-uber - thank you for the implementation. I’ll handle the rest

Read more comments on GitHub >

github_iconTop Results From Across the Web

javascript - Preventing page from scrolling on focus switching
I think you want to call focus on the element directly and use the 'preventScroll' option. el.focus({preventScroll: true});
Read more >
overscroll-behavior - CSS: Cascading Style Sheets | MDN
The overscroll-behavior CSS property sets what a browser does when reaching the boundary of a scrolling area.
Read more >
The autofocus attribute - HTML Standard - whatwg
When these features attempt to scroll to a target which is in the ... When the user requests that focus move from the...
Read more >
API - React Select
Remove the currently focused option when the user presses backspace when Select ... If you wish to overwrite a component, pass in an...
Read more >
Smooth Scrolling | CSS-Tricks
If you override the default focus-changing behavior (which you have ... Could someone provide a concise script with these options built-in?
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found