key listeners inside a modal don't fire anymore

[stianjensen]

• components: Modal
• reactstrap version #8.8.0
• import method es
• react version #17.0.0
• bootstrap version #4.5.3

What is happening?

Inside a Modal component, i am using react-image-lightbox for a small image gallery. When the image lightbox is visible I press my keyboard arrow keys, and the current image is not changing.

What should be happening?

Keybinds should work to navigate through images like they did when using reactstrap 8.7.1.

Steps to reproduce issue

1. Install both reactstrap and react-image-lightbox (I'm sure other packages and use-cases are affected as well, but this is how I discovered the issue)
2. Embed a Lightbox component within a Modal.
3. Try using keyboard shortcuts set up by the lightbox component.

Error message in console

No error output

Code

Reproduce:
https://stackblitz.com/edit/reactstrap-7upqrn?file=Example.js

Changing the reactstrap version from 8.8.1 to 8.7.1 in package.json makes the navigation work again.

I've installed builds of reactstrap locally and pinned down the issue to stem from the following commit:
bf46484

[kyletsang]

Looks like the focus is stuck on the "open gallery" button, so all key events aren't targeting the lightbox.

[kyletsang]

Also, lightbox is opening it's own portal, so any focus capturing assumption we have in modal won't really work.

[kyletsang]

@stianjensen can you do something like this? https://stackblitz.com/edit/reactstrap-omwcih?file=Example.js

This sandbox modifies yours by adding a new portal target for rendering the lightbox, so instead of rendering at the body level, it renders within the modal.

[stianjensen]

Yeah, that looks like it works well - thanks!

[kyletsang]

Cool thanks for confirming. Not sure if there's anything we can change on our end for that