Aurelia Keyboard Event Binding Pitfall
Sometimes all you need to know is right in front of you. But still, it can happen that you and even none of your colleagues can see the trees in the forest. We had such a case last week and had problems with a not working keydown and keypress binding. It’s trivial when you know how to do it, but if you don’t, you have to find this specific piece of documentation that tells you about the right syntax.
The main reason to write this blog post is, to provide a better search result in case somebody runs into the same problem. Probably me in a year :)
Keypress And Keydown Event Binding
In Aurelia, you can bind on nearly every Event just omit the “on” prefix and append a
.delegate, right? That’s true except a little exception regarding keyboard events on an input field.
So assuming the following code keyboard event binding:
handleKeypress method will log the pressed key, but the pressed key will not appear as a value in the input field.
The same happens when using
keydown.bind but not when using
The keyup binding is different than the keydown and keypress event because the keyup event gets fired after the user typed into the input field and not right before. Therefore the keyup event gets fired after the typed key appeared in the input field.
But why don’t we see the typed keys in the input field for the two other events? The thing we didn’t know and that caused a lot of confusion was that
event.preventDefault() by itself in every event handler method.
So in order to check the typed key and allow them (or just some typed keys) to appear in the input field you have to
See the full example of keypress event binding here
We googled a lot and couldn’t find any helpful information on keyboard event binding. This was quite frustrating because what could possibly go wrong in 4 lines of code? Especially because we are using event binding already multiple times throughout the application.
But sometimes you just have to “read the fucking manual”. Everything we were missing was that Aurelia calls
event.preventDefault() and that
we had to
return true; in order to propagate the event. All this is written in the Aurelia documentation.
Found some typo, want to give feedback or discuss? Feel free to contact me :)