Vaadin-integer-field disable arrow up and arrow down shortcuts

Hi, I’m trying to use the vaadin-integer-field in the context of an app that handles keyboard shortcuts and currently the default shortcuts for arrow up and down (increate and decrease the value respectively) are clashing with the other shortcuts. Is there a way to disable those default events?

There is no option for disabling the default behavior. One workaround would be to intercept the keydown event from the internal input before it reaches vaadin-integer-field itself, which contains the logic for increasing/decreasing the value:

const integerField = document.querySelector('vaadin-integer-field');
integerField.inputElement.addEventListener('keydown', (event) => {
  if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
    event.preventDefault();
    event.stopPropagation();
  }
});

A more hacky approach would be to patch the method that handles the keydown event:

const integerField = document.querySelector('vaadin-integer-field');
integerField._onKeyDown = function (event) {
  if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
    event.preventDefault();
    return;
  }
  this.__proto__._onKeyDown.call(this, event);
};

Alternative solution: don’t use the number field, but a plain old text field and parse / convert the number yourself in the binder.

2 Likes

Thanks a lot for the suggestions. I’m using Vaadin Flow 24 and I wanted to avoid to javascript based hacks. I tried with this:

integerFieldColumnRenderer.getElement().addEventListener("keydown", event -> {}).preventDefault().stopPropagation();

but it seems that the keydown listener (or whatever the implementation is) for the IntegerField is called very early in the process, so the value is still changed. Thanks anyway, maybe your answer will help other people with similar problem.

Looks like this is the way to go for me, thanks for the suggestion.