title: Prevent focused div from scrolling with arrow keys
body: <p>I have a div component with an inner scrollbar and I'd like to prevent the up/down arrow keys from scrolling when the element is focused (mouse click on the element), as they are used for other events (e.g. zoom).</p>
  <p>The only solution I found was to attach an event listener to the document, however, it disables all default arrow keys events, such as moving the cursor in an input field.</p>
  <p>Here is an example (in React):
  <a href="https://codesandbox.io/s/rsc-live-example-fze6z" rel="nofollow noreferrer">https://codesandbox.io/s/rsc-live-example-fze6z</a></p>
  <p>How to reproduce:</p>
  <ul>
  <li>Click with the mouse on the inner div (with the text)</li>
  <li>Click the down arrow key -&gt; div scrolls down</li>
  </ul>
  <p>Is there a way to prevent the scroll without disabling it on the document level?</p>
  <p>Thanks!</p>
  <p>UPDATE:</p>
  <p>This missing piece was adding <code>tab-index='0'</code> to the component (I updated the code above). Thanks @Jarvan</p>