onKeyDown event not working on divs in React

Question

I want to use a keyDown event on a div in React. I do:

  componentWillMount() {
      document.addEventListener("keydown", this.onKeyPressed.bind(this));
  }

  componentWillUnmount() {
      document.removeEventListener("keydown", this.onKeyPressed.bind(this));
  }      
  
  onKeyPressed(e) {
    console.log(e.keyCode);
  }
    
  render() {
    let player = this.props.boards.dungeons[this.props.boards.currentBoard].player;
    return (
      <div 
        className="player"
        style={{ position: "absolute" }}
        onKeyDown={this.onKeyPressed} // not working
      >
        <div className="light-circle">
          <div className="image-wrapper">
            <img src={IMG_URL+player.img} />
          </div>
        </div>
      </div>
    )
  }

It works fine, but I would like to do it more in React style. I tried

onKeyDown={this.onKeyPressed}

on the component. But it doesn't react. It works on input elements as I recall.

Codepen

How can I do it?

Also take a look at this: pluralsight.com/guides/event-listeners-in-react-components — Shahriar
– Shahriar, Commented Jul 20, 2022 at 9:22

HoldOffHunger · Accepted Answer · 2020-08-14 14:08:51Z

273

You should use tabIndex attribute to be able to listen onKeyDown event on a div in React. Setting tabIndex="0" should fire your handler.

edited Aug 14, 2020 at 14:08

HoldOffHunger

21.3k11 gold badges123 silver badges147 bronze badges

answered Jun 8, 2017 at 11:49

burak

4,0741 gold badge17 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Will P. Over a year ago

This seems like bad, opinionated design. What if I want to handle a bubbling event on a container element but that container itself should not ever be focused?

Iwnnay Over a year ago

This seems like more of a hack or workaround to me. There may be a time when you need to have the given div maintain a tab order.

IliasT Over a year ago

tabIndex={-1} can also be used if you're working with an element that isn't interactive and don't want to change the tab order of the document.

Kavita Over a year ago

you have to set the tabIndex, to make the div focusable. You can set the tabIndex to 0,1,-1.... But before you do that check this out webaim.org/techniques/keyboard/tabindex You'll likely want to set to -1 since you're manipulating it programmatically.

Flion Over a year ago

for some reason this only works if I have an <input> element in the div with the tabIndex. Or something else that can be focussed. With just other divs, its still not capturing. Any thoughts?

|

Panther · Accepted Answer · 2017-04-20 13:28:58Z

37

You need to write it this way

<div 
    className="player"
    style={{ position: "absolute" }}
    onKeyDown={this.onKeyPressed}
    tabIndex="0"
  >

If onKeyPressed is not bound to this, then try to rewrite it using arrow function or bind it in the component constructor.

edited Apr 20, 2017 at 13:28

answered Apr 19, 2017 at 19:00

Panther

9,5183 gold badges26 silver badges37 bronze badges

6 Comments

Michael Over a year ago

Sorry. I was sure, I just overlooked the this. But this is not the problem. It's still not working.

Panther Over a year ago

updated answer. You should either click on the div or bring it to focus before pressing any keys.

Michael Over a year ago

I did. It's not working. I updated the code above. It works fine with the DOM commands, but not in React style.

Panther Over a year ago

can you explain what is not working? is your function not getting callled or console.log is outputing nothing ?

busybee Over a year ago

works for me with tabIndex={0} , tabIndex requires a number, not a string, so tabIndex="0" was flagged as a typescript error

|

steel · Accepted Answer · 2020-11-03 01:52:09Z

11

You're thinking too much in pure Javascript. Get rid of your listeners on those React lifecycle methods and use event.key instead of event.keyCode (because this is not a JS event object, it is a React SyntheticEvent). Your entire component could be as simple as this (assuming you haven't bound your methods in a constructor).

onKeyPressed(e) {
  console.log(e.key);
}

render() {
  let player = this.props.boards.dungeons[this.props.boards.currentBoard].player;
  return (
    <div 
      className="player"
      style={{ position: "absolute" }}
      onKeyDown={this.onKeyPressed}
    >
      <div className="light-circle">
        <div className="image-wrapper">
          <img src={IMG_URL+player.img} />
        </div>
      </div>
    </div>
  )
}

edited Nov 3, 2020 at 1:52

answered Apr 21, 2017 at 2:00

steel

12.7k7 gold badges79 silver badges122 bronze badges

5 Comments

Michael Over a year ago

That's exactly how I wanted to write it. But the hell, it's not going. Here is the codepen: codepen.io/lafisrap/pen/OmyBYG . If you comment line 275 then key board input (cursor keys) is not working. onKeyDown is in line 307.

Michael Over a year ago

keyCode I use for cursor keys, as they return no character.

steel Over a year ago

React doesn't use Javascript event objects, so there is no keyCode property. That event object is a React SyntheticEvent.

steel Over a year ago

@Michael I also am not entirely sure how you are triggering a key event on a div, but when I put this code into a fiddle with an onClick prop instead of onKeyDown the handler fires.

Michael Over a year ago

Thanks. That explains it ... The key events work in input fields though.

Muppet · Accepted Answer · 2020-08-30 19:04:44Z

10

Using the div trick with tab_index="0" or tabIndex="-1" works, but any time the user is focusing a view that's not an element, you get an ugly focus-outline on the entire website. This can be fixed by setting the CSS for the div to use outline: none in the focus.

Here's the implementation with styled components:

import styled from "styled-components"

const KeyReceiver = styled.div`
  &:focus {
    outline: none;
  }
`

and in the App class:

  render() {
    return (      
      <KeyReceiver onKeyDown={this.handleKeyPress} tabIndex={-1}>
          Display stuff...
      </KeyReceiver>
    )

answered Aug 30, 2020 at 19:04

Muppet

6,0378 gold badges34 silver badges45 bronze badges

Comments

Pierre Olivier Tran · Accepted Answer · 2021-12-14 18:00:53Z

7

Also, remember that this trick will only work when focus is set on your div. If you want to manage keypress as soon as the div pops up, you can use this trick (especially useful for Drawers/Modals)

answered Dec 14, 2021 at 18:00

Pierre Olivier Tran

1,8894 gold badges28 silver badges46 bronze badges

Comments

busybee · Accepted Answer · 2020-05-15 15:31:48Z

5

The answer with

<div 
    className="player"
    onKeyDown={this.onKeyPressed}
    tabIndex={0}
>

works for me, please note that the tabIndex requires a number, not a string, so tabIndex="0" doesn't work.

answered May 15, 2020 at 15:31

busybee

2043 silver badges6 bronze badges

Comments

user1503606 · Accepted Answer · 2022-10-17 11:22:18Z

0

For anyone else having issues with this I was losing the plot with on key down and on key up not working you can use mouse events.

This was fine for what I needed.

import './App.css'

function App() {
  const handleDown = () => {
    console.log('down')
  }
  const handleUp = () => {
    console.log('up')
  }
  return (
    <button onMouseDown={handleDown} onMouseUp={handleUp}>
      PRESS DOWN
    </button>
  )
}

export default App

answered Oct 17, 2022 at 11:22

user1503606

4,34815 gold badges50 silver badges84 bronze badges

Collectives™ on Stack Overflow

onKeyDown event not working on divs in React

7 Answers 7

7 Comments

6 Comments

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

7 Comments

6 Comments

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related