Not able to dispatch KeyDown event to React Component

Question

I would like to dispatch onKeyDown events from a body element too a div inside of the body.

I am using React and have tried adding an onKeyDown event listener to my body tag in the componentDidMount function of my React component.

componentDidMount() {
    document.getElementById("main-content").onkeydown = event => {
        document.getElementById("Keyboard").dispatchEvent(event);
    }
}

I expected the keydown event to be dispatched to the Keyboard component, but instead I receive the error listed below.

InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable.

Any help would be appreciated!

Mick Vader · Accepted Answer · 2019-05-09 19:21:35Z

0

Can you not hardcode it onto your div element?
Use this question as reference if you can.

If you can't harcode it maybe try this:

    document.querySelector('#yourDiv').addEventListener('keydown', function (event) {
      console.log(event.key) //Change this to whatever you want it to do
    })

Then in your HTML give your div a tabindex="0" property.

The tabindex property:

tabindex="0" allows a non-form/link/object element to be placed in the default navigation order, allowing any element to be focusable and trigger interaction.

More info here

answered May 9, 2019 at 19:21

Mick Vader

1009 bronze badges

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

2 Comments

Chris Vensand Over a year ago

Thank you, the question you linked worked! I tried hardcoding it, but I forgot to set tabIndex="0".

Mick Vader Over a year ago

Glad I could help! I fell for the same problem before

Collectives™ on Stack Overflow

Not able to dispatch KeyDown event to React Component

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related