Mousetrap firing twice

Question

This is my code:

Mousetrap.bind('l', (e) => {
  console.log('l')
})

Mousetrap.bind('k+l', (e) => {
  console.log('k+l')
})

I have 2 questions:

1. When I press l I'm seeing both logs. Any ideas why?

2. When I'm pressing k + l, I'm seeing both logs too (I understand why) but any ideas how to prevent this?

Thanks

Answer 1

That's because k is not a valid modifier key.

As described in the docs:

For modifier keys you can use shift, ctrl, alt, or meta.

In other words, k+l is normalized to l, i.e. you are binding l twice.

---

For more details, you can check out the relevant bit of logic in the mousetrap source directly.