I want to be able to give the user the ability to use the keyboard left/right arrow keys to move between images that are loaded in a modal. The modal is mounted using ReactDOM.createPortal(). An array of images are coded to iterate using onClick events on next/previous react class components.
I think that when the modal mounts into the Portal the focus is still on the app’s #root div, therefore maybe this is why keyboard events are not being registered? OnFocus as an event I believe in React will not move focus onto a DOM element that I want to target, i.e. the Modal/Portal, is this true? Does this only gives access to a function on focus and on blur?
Is a workaround, or correct way, to put the onKeyDown event on the main App and then only listen to it when the Modal state is true, and the if the key values are equal to “ArrowLeft” or “ArrowRight”? Or should I use componentDidMount/componentWillUnmount for the modal to use vanilla JS to add an event listener to the window?
Thank you to any who may be able to point me towards figuring this out