Shortcuts are global while the element it should be attached to is null

[zhouzi]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

Imagine you want to attach keyboard shortcuts to a specific element. But that element is not part of the DOM initially (e.g because it's loading). So the ref object that's passed to useHotkeys has { current: null }. Currently, this makes the shortcuts global.

Expected behavior

I would expect the keyboard shortcuts to only be attached to the element I am providing. And so they should be disabled when the element doesn't exist.

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/react-ts-tzrezy?file=App.tsx

1. In this reproduction, a keyboard shortcut is attached to an element that is not shown initially
2. While the element is not shown, press the keyboard shortcut: it works globally.

What is the motivation / use case for changing the behavior?

This one shouldn't be too hard to fix, it's just a matter of making the difference between:

• { ref: undefined } -> global
• { ref: { current: null } } -> disabled, element is null
• { ref: { current: HTMLElement } } -> attached to element

Environment

Libs:
- react version: latest
- reakeys version: latest


Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others: