useWindowKeyDown={false} doesn't work correctly on Chrome

[gregend]

Summary After navigating through 2 images, arrow keys stop working and you need to "refocus" the gallery by clicking on the image to be able to use them again.

To Reproduce Steps to reproduce the behavior:

1. Go to https://www.linxtion.com/demo/react-image-gallery/
2. Uncheck "use window keydown"
3. Click in the middle of an image
4. Use arrows to navigate through the gallery

Expected behavior Should be able to navigate through the entire gallery with arrow keys without the need to click on it every 2 images.

Desktop:

• MacBook Pro (15-inch, 2018)
• Chrome Version 91.0.4472.164 (Official Build) (x86_64)

Additional context Bug occurs only when clicking on the image, clicking on the navigation icons and using arrow keys works fine. Works correctly Firefox and Safari.

[xiaolin]

Looks like this may be a little tough since different browsers handles it differently. Chrome loses focus and document.activeElement becomes body after two keydowns.

If there is no clean fix, may get rid of useWindowKeyDown={false} and let the user handle that case (as its a custom keydown event)

Solution 1: Find a fix for all browser Solution 2: useWindowKeyDown={false} acts as the current disableKeyDown and removes window keydown event handlers