Can't click without scroll being changed

[leads]

Hi please see this codesandbox example and demo.

Here I am using a Modal we have built and it uses body-scroll-lock-upgrade and react-focus-lock.

If you open the Modal then scroll down the list, try clicking the label text. It will jump you back up. You can click the checkbox directly but then trying another click elsewhere it will scroll back to that focussed item.

I made a demo without checkboxes and the same thing happens if you click in a grey box. Also a demo without the body-scroll-lock.

Hopefully this is an implementation mistake on our behalf that we have missed. Any ideas?

Thanks

[denkristoffer]

Use preventScroll in focusOptions: https://codesandbox.io/s/happy-pascal-ndd77z?file=/src/Modal.tsx:3109-3168

See #162

[theKashey]

Root cause - you have a focusable element "above" focus lock. When you click on the "text" you are selecting this element and as it is "above" focus (or "outside") the focus will be returned to where it belongs.

The fix is simple - wrap dialog with focus-lock, not the other way around - https://codesandbox.io/s/busy-blackwell-6svn9r?file=/src/Modal.tsx

How to check: you should be able to select text with a mouse. If you cannot, then something is wrong. Focus-lock implicitly allows for focus to reside on body, but nowhere else.

[leads]

Awesome, thank you!