Opening Lightbox always scrolls to top of page

[jerryslaw]

I'm using masonry to show images on my page. Every click on each image opens Lightbox. When I have many images, I have to scroll page down. Then, when I open Lightbox, it scrolls (moves) to the top of page. IMO it's not desired behavior. I think it is caused by hardcoded position of react-modal component (position: absolute, top: 0, etc). Maybe Lightbox should take current position to show modal, or maybe simply have position: fixed?

[zquancai]

I also encountered this problem, it is not a bug.
It also should not be Lightbox's problem.
The solution is to set the container tabIndex=1, like this:

import Lightbox from 'react-image-lightbox';
// ... other
<div tabIndex="1" onClick={() => { this.isOpen = true }} >
  <img
    alt="fail"
    src="https://avatars2.githubusercontent.com/u/8609783?s=88&v=4"
  />
  <Lightbox
    mainSrc="https://avatars2.githubusercontent.com/u/8609783?s=88&v=4"
    onCloseRequest={() => this.setState({ isOpen: false })}
  />
</div>

But eslint maybe does not pass.
or set the react-modal props like this:

import Lightbox from 'react-image-lightbox';
// ... other

<div tabIndex="1" onClick={() => { this.isOpen = true }} >
  <img
    alt="fail"
    src="https://avatars2.githubusercontent.com/u/8609783?s=88&v=4"
  />
  <Lightbox
    reactModalProps={{ shouldReturnFocusAfterClose: false }}
    mainSrc="https://avatars2.githubusercontent.com/u/8609783?s=88&v=4"
    onCloseRequest={() => this.setState({ isOpen: false })}
  />
</div>

The following 2 pieces of code can help you:
1、shouldReturnFocusAfterClose
2、focusLaterElements

[andresgutgon]

Thanks @zquancai shouldReturnFocusAfterClose did the trick :)

[bhushan-patil-official]

Thanks @zquancai it worked for me too. I was using inside headless ui thought headless ui's tab has the issue.