How to handle onKeyDown event on div in ReactJS

Question

I'm trying to handle key event when load page component. First, I have a router:

<Router>
    <Route exact path="/" component={Home} />
</Router>

In home component, I try to bind onKeyPress in div element but it's not work. I bind it on input element, it's worked.

return (
        <div onKeyDown={this.__handleKeyDown} className="container" style={{ backgroundImage: `url(${this.state.backgroundbanner})` }}>
            <input
                className="hidden"
                onKeyDown={this.__handleKeyDown}
                ref={(input) => { this.dummyInput = input; }}
                />
            <div className="container-shadow">
                <h1 className="main-title">{this.state.title}</h1>
                <h3 className="main-description">{this.state.description}</h3>
                <ListMovie cursor={ cursor } />
            </div>
        </div>
    )

How to bind event onKeyDown on div element or how to bind key event when load a page component in Route. Because, input element can be out-focus and this key event cannot be excute.

Thanks.

Daniel Andrei · Accepted Answer · 2017-11-07 10:34:31Z

6

The reason as to why it doesn't work is that the div element requires the tabIndex attribute in order to be focusable and to handle keyDown events.

<div tabIndex="1" onKeyDown={this.__handleKeyDown}></div>

answered Nov 7, 2017 at 10:34

Daniel Andrei

2,70417 silver badges16 bronze badges

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

2 Comments

Pham Minh Tan Over a year ago

Thanks @Daniel Andrei, the simple solution :). It's worked.

Kavita Over a year ago

You'll likely want to set to -1 since you're manipulating it programmatically. webaim.org/techniques/keyboard/tabindex

klugjo · Accepted Answer · 2017-11-07 10:33:33Z

6

Approach 1:

For the event to trigger, your div needs to be selected. To do this you need to focus it in the componentDidMount event. And to do this you need a ref to your div.

Step 1: get a ref to your div

<div onKeyDown={this.__handleKeyDown} ref={(c) => {this.div = c;}}>

Step 2: Focus it on load

componentDidMount() {
  this.div.focus();
}

Approach 2:

Listen to events on the entire document

componentDidMount() {
    document.addEventListener('keydown', this.onKeyDown);
}

componentWillUnmount() {
    document.removeEventListener('keydown', this.onKeyDown);
}

answered Nov 7, 2017 at 10:33

klugjo

21k10 gold badges65 silver badges83 bronze badges

1 Comment

Dhia Hassen Over a year ago

for me this.ref.current.focus()

Collectives™ on Stack Overflow

How to handle onKeyDown event on div in ReactJS

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related