How to disable arrow keys?

Question

I have template view (Extjs v6.5) where navigation inbuilt with all four (left right top down) keys, whereas my view is like a vertical list, so I wanted to use only top and down keys and disable left and right keys.

I have tried disabling buttons on itemKeyDown event of Ext JS

this.addListener('itemkeydown', (me, record, item, index, e, eOpts) => {
  if (e.keyCode === 37 || e.keyCode === 39) {
    return false;
  }
});

And keydown event of javascript button couldn't achieve it.

this.el.dom.addEventListener('keydown', (e) => {
  if (e.keyCode === 37 || e.keyCode === 39) {
    return false;
  }
});

Also tried e.preventDefault(); along with return false;

Sample code fiddle can be found here

Answer 1

Call e.stopPropagation() to keep the keyboard event from bubbling up to a parent element.

This revised code will catch the "ArrowRight" and "ArrowLeft" keys.

function ignoreRightOrLeftKeys (e) {
  if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
    e.stopPropagation();
    console.log("itemkeydown stopped");
    return false;
  }
  return true;
}

this.el.dom.addEventListener("keydown", (e) => {
  console.log("keydown caught e:", e);
  return ignoreRightOrLeftKeys(e);
});

this.addListener("itemkeydown", (me, record, item, index, e, eOpts) => {
  console.log("itemkeydown caught e:", e);
  return ignoreRightOrLeftKeys(e);
});