Cleanup function doesn't re-attach events that have been overwrited

[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

1. In component A, attach a listener to a key, e.g "m"
2. In component B, attach a listener to the same key while A is still in the page
3. Now unmount B while A is still in the page

A's key listener don't work anymore.

Expected behavior

I would expect A's listeners to not be overwritten anymore and thus work.

Minimal reproduction of the problem with instructions

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

1. In the above reproduction, press "m" to generate a random number.
2. Click on the button to open the modal.
3. In that modal, press "m" to close it.
4. Now try to press "m" to pick a random number again: it doesn't work anymore.

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

We have a similar use case as the reproduction. A modal overwrites others shortcuts and when it's removed, the listeners are not re-attached (it's not re-rendered).

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:

[amcdnl]

Sigh - I thought we fixed this. Any suggestions?

[zhouzi]

A solution could be to look for a listener with keys equal to the one that's unsubscribed in removeKeys and attach it. Something like:

const removeKeys = (nextKeys: HotkeyShortcuts[]) => {
  keys = keys.filter((k) => !nextKeys.includes(k));
  nextKeys.forEach((s) => {
    Mousetrap.unbind(s.keys, s.action);
    
    // can't use a === here but that's the idea
    const key = keys.findLast(k => k.keys === s.keys);
    if (key) {
      Mousetrap.bind(key.keys, key.callback, key.action);
    }
  });
};

That's a little tedious though. Another solution could be to unbind all listeners and re-bind all the remaining ones from keys. It has the advantage of letting Mousetrap handle priorities and overwrites.

const removeKeys = (nextKeys: HotkeyShortcuts[]) => {
  keys.forEach((s) => Mousetrap.unbind(s.keys, s.action));
  keys = keys.filter((k) => !nextKeys.includes(k));
  keys.forEach((k) => Mousetrap.bind(k.keys, k.callback, k.action));
};

[amcdnl]

If you wanna make a PR, I'd be happy to accept. There is a storybook story that tests the attaching/detaching, just need to make sure and test that w/ ur proposed change.