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