Can't add event listener (key down) after submitting the captcha

react-google-recaptcha version: 1.0.5 react-async-script version: 1.0.1

I render recaptcha in my component

 <ReCAPTCHA
     sitekey="sadfsdfsadfasdfUqhEHvqxYO4UJeompXDkua"
     onChange={this.handleCaptcha}
 />

and want to add the window event listener for Enter key. I want this for accessibility (submitting of form)

 componentDidMount() {
    window.addEventListener('keydown', function(e) {
      console.log(e);
    })
  }

this is my handleCaptcha method

handleCaptcha = value => {
    this.setState({ captcha: value })
}

But the problem is that I can’t catch any event after captcha was submited. I have no idea what to do.

[dozoisch]

@max-glyzin see https://stackoverflow.com/a/22164614/1452289 or https://javascript.info/bubbling-and-capturing#capturing

when you click (or generate any event) on something in a browser, it goes through 2 phases. Capture and Bubbling.

Capture starts from the outer most piece (document / body) and goes through the HTML tree down to your element, letting any handlers do something with the event. When it hits the target element (eg: a button) it starts bubbling back up, using the same route.

Given that capture goes first, you get access to the event before anyone else is able to stop the propagation. If you register on document on the bubbling phase, you will be the last handler to receive the event and thus lets a lot of “time” for other handlers to block the event. By using a document handler on capture phase you are the very first handler to receive the event.

[max-glyzin]

@dozoisch thanks for explanation. Now I understand how this parameter works.