Aurelia Keyboard Event Binding Pitfall

January 30, 2018

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 .trigger or .delegate, right? That's true except a little exception regarding keyboard events on an input field.

So assuming the following code keyboard event binding:

<input type="text" keypress.delegate="handleKeypress($event)" />

handleKeypress($event) {
  console.log($event);
}

The 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 keyup.bind.

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 Aurelia calls 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 return true;

handleKeypress($event) {
  console.log($event);
  return true;
}

See the full example of keypress event binding here

RTFM

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 :)