title: HandleKeyPress not recognising down arrow
body: <p>I'm in the process of building a customised, accessible <code>select</code> input with React.js. I need to have the <code>up</code> and <code>down</code> arrow keys function as the <code>tab</code> key would within the scope of <code>select</code> input's <code>option</code>s.</p>
  
  <p>I have a <code>handleKeyPress</code> function on the elements that detects when other keys are pressed (for instance <code>'Enter'</code> works fine).</p>
  
  <p>Here is an example <code>option</code>:</p>
  
  <pre><code>&lt;li
    className="oc-select-field__item"
    tabIndex="0"
    onClick={handleClick}
    onKeyPress={handleKeyPress}
  &gt;
  </code></pre>
  
  <p>...and here is the <code>handleKeyPress</code> function</p>
  
  <pre><code>handleKeyPress = event =&gt; {
    if (event.key === 40) {
      console.log('Down arrow key fired'); // does not fire
    }
    if (event.key === 'Enter') {
      console.log('Enter key fired'); // does fire
    }
  };
  </code></pre>
  
  <p>What am I doing wrong that I am not successfully detecting when the <code>down</code> arrow is pressed?</p>