How do we detect the "keyDown/keyPress" events for Macbook Pro touch bar keys?

Question

I recently came across a requirement to close a Modal on Esc key press (508 compliance). I then realised that the onKeyDown handler I wrote on my react component wasn't working as expected. The event wasn't getting fired on clicking Escape key from my macbook pro's touch bar. Has anyone gone through similar issue ? If yes, is there a workaround ?

Answer 1

You should write onKeyDown={(e) => yourFunctionName(e)} on the Modal element and your function should look like something like this

const yourFunctionName = (e) => { if (e.key === "ENTER") { closeModal() } }