HandleKeyPress not recognising down arrow

Question

I'm in the process of building a customised, accessible select input with React.js. I need to have the up and down arrow keys function as the tab key would within the scope of select input's options.

I have a handleKeyPress function on the elements that detects when other keys are pressed (for instance 'Enter' works fine).

Here is an example option:

...and here is the handleKeyPress function

handleKeyPress = event => {
  if (event.key === 40) {
    console.log('Down arrow key fired'); // does not fire
  }
  if (event.key === 'Enter') {
    console.log('Enter key fired'); // does fire
  }
};

What am I doing wrong that I am not successfully detecting when the down arrow is pressed?

user_694824 · Answer

event.which will give you the numeric value of the key.

event.key and event.code will give you a string value.

Try this tool: http://keycode.info

if (event.key === 'ArrowDown') {
    console.log('Down arrow key fired');
}

As @devserkan mentioned you should use onKeyDown instead of onKeyPress.

The keydown event is fired when a key is pressed down. Unlike the keypress event, the keydown event is fired for keys that produce a character value and for keys that do not produce a character value.

user_7060441 · Answer

For Arrow keys, I think you need onKeyDown instead of onKeyPress.

class App extends React.Component {
  handleKeyPress = ( event ) => {
    if ( event.key === "ArrowDown" ) {
      console.log( "Down arrow key fired" ); // does not fire
    }
    if ( event.key === "Enter" ) {
      console.log( "Enter key fired" ); // does fire
    }
  };

  render() {
    return (
      
        
          Foo
          
        
      
    );
  }
}

ReactDOM.render(, document.getElementById("root"));

HandleKeyPress not recognising down arrow

2 Answers