Handling onKeyDown event on Div elements in React

avatar

Borislav Hadzhiev

Thu Apr 28 20223 min read

banner

Photo by Josh Hild

Handling onKeyDown event on Div elements in React #

To handle the onKeyDown event on div elements in React:

  1. Set the onKeyDown prop on the div element.
  2. Set the element's tab index to 0, e.g. tabIndex={0}.
  3. Access the pressed key on the event object, e.g. event.key in your handler function.
App.js
const App = () => { const handleKeyDown = event => { console.log('User pressed: ', event.key); }; return ( <div> <div tabIndex={0} onKeyDown={handleKeyDown}> <h2>hello world</h2> </div> </div> ); }; export default App;

react onkeydown div

Div elements are not focusable by default, so in order to handle the onKeyDown event on a div, we have to set the tabIndex prop on the element.

The tabIndex attribute indicates that its element can be focused and where it participates in sequential keyboard navigation (using the Tab key).

When an element's tabIndex is set to 0, the element is focusable in sequential keyboard navigation, after any positive tabIndex values.

For example, if other elements on the page have a tab index of 1, 2, 3, etc, an element with a tabIndex of 0 would get focused after the elements with positive tabIndex.

You could also set the element's tabIndex to -1, which means that the element is not reachable via sequential keyboard navigation (using the Tab key), but can be focused with JavaScript or by clicking on it with the mouse.

App.js
const App = () => { const handleKeyDown = event => { console.log('User pressed: ', event.key); }; return ( <div> <div tabIndex={-1} onKeyDown={handleKeyDown}> <h2>hello world</h2> </div> </div> ); }; export default App;

onkeydown tabindex minus one

With the div's tabIndex set to -1, it can't be focused using the Tab key but it can still be focused with a mouse click (or using JavaScript).

The key property on the KeyboardEvent object returns the value of the key that was pressed by the user.

The keydown event is triggered anytime the user presses a key on their keyboard.

You can view the possible keys the user might press by visiting this MDN page.

If you want to focus the element on which the onKeyDown prop is set immediately after the page loads, set a ref on the element and call the focus() method in the useEffect hook.

App.js
import {useEffect, useRef} from 'react'; const App = () => { const handleKeyDown = event => { console.log('User pressed: ', event.key); }; const ref = useRef(null); useEffect(() => { ref.current.focus(); }, []); return ( <div> <div ref={ref} tabIndex={-1} onKeyDown={handleKeyDown}> <h2>hello world</h2> </div> </div> ); }; export default App;

focus element on page load

We used the useRef hook to create a ref object that gives us access to the div element.

The useRef() hook can be passed an initial value as an argument. The hook returns a mutable ref object whose .current property is initialized to the passed argument.

Notice that we have to access the current property on the ref object to get access to the div element on which we set the ref prop.

When we pass a ref prop to an element, e.g. <div ref={myRef} />, React sets the .current property of the ref object to the corresponding DOM node.

We used the focus() method to focus the div in the useEffect hook.

The current property on the ref gives us access to the div element, so calling ref.current.focus() sets the focus on the div.

Use the search field on my Home Page to filter through my more than 1,000 articles.