onKeyDown on <Modal/>

[mkaradeniz]

Not sure if this was intended behavior, but I added an onKeyDown attribute on the <Modal />-Component to navigate through pictures shown inside Modal. But since Version 0.65.0 this doesn't work anymore.

Steps

Adding an onKeyDown attribute to <Modal />

Expected Result

Should fire the onKeyDown event.

Actual Result

Does not fire the onKeyDown event.

Version

0.65.0+

Testcase

0.64.8: https://codepen.io/anon/pen/bRQQwV?editors=1111 (Working, outputs the pressed key to the console.)
0.65.0: https://codepen.io/anon/pen/OgaBYe?editors=1111 (Not working, does not output the pressed key to the console.)

[layershifter]

Why?

The breaking change was done in #1341, also you can read there why it was done.

keyDown

onKeyDown doesn't work because Modal doesn't have a tabIndex attribute in 0.65.0+, while it had in 0.68.8. You can simply fix this, if you tabIndex={-1}, see codepen.

P.S. Thanks for a detailed report 👍

[mkaradeniz]

Thank you!

Sorry for posting again, but I can't recreate the way it was working on 0.68.8 as it this still doesn't focus the <Modal /> upon mount to onKeyDown right away without clicking on the Modal first. (Like mentioned in your referenced PR.) So I should tell react to focus it, but I'm not sure how exactly I go about this. If I set a ref to <Modal/> and let ReactDOM focus it on mounting, it doesn't work. I could wrap the <Modal /> inside a wrapper div (which has onKeyDown and focus on that, but then Chrome thinks it is selected and draws a border around it. So how could I foucs the <Modal /> manually?

[layershifter]

It's a hateful workaround, but you can use there following:

const id = 'my-modal'
const captureFocus = () => {
  const el = document.querySelector(`#${id}`)
  el.focus()
}

<Modal id={id} onOpen={captureFocus} trigger={<Button />} />

Also, check #1732 for more details, there is also a codepen that will be helpful.

[mkaradeniz]

Thank you, I'll try this!