onChange breaks after reset

[snowcxt]

run grecaptcha.reset() and then the onChange event doesn't work anymore.

You could need to bind everything after the reset

[tstavinoha]

I have a similar problem, reset and expiration reload my whole page, putting all form field in the URL as query params

Has anyone encountered this and possibly worked around it?

[dozoisch]

I'll try to repro and fix it whenever I have some time.. I'm in a massive rush right now

[Sawtaytoes]

Do I need to use grecaptcha.reset() to test resetting or can I just do const recaptcha = <ReCAPTCHA /> and call recaptcha.reset()?

[dozoisch]

@sawtaytoes I'm not sure. Haven't had the time to investigate this much.

[Sawtaytoes]

For a workaround, I removed and re-added the component instead of using the .reset() function.

[stiofand]

I'm trying to get my Recaptcha component to reset, based on a redux store dispatch, but none of the reset examples here apply to a ReCaptcha component. I have no idea what this grecaptcha example is. Is there somewhere I can see a less convoluted reset example of the actual React Element being reset???

const ReCaptchaBox = ({dispatch, shouldReset})=> {

 if(shouldReset){
   // Reset captcha??
  // Possible return new ReCaptcha as per Sawtaytoes example?
}

return(
    <ReCAPTCHA
      className="recaptcha-box"
      name="recaptcha"
      sitekey={AppProperties.googleReCaptchaKey}
      size="normal"
      onChange={r => sendRecaptchaVerificationRequest(dispatch, r)}/>
  );
};

export default connect(state=>({
  shouldReset: state.recaptcha.shouldReset
}))(ReCaptchaBox);

Then in code,

<ApplicationForm>
    .....
    <ReCaptchaBox />
</ApplicationForm >

My solution would be for another element (any redux connected element to fire of a RESET_RECAPTCHA or similar, which would update the store, and thus the recaptcha would reset:

I cant see any possible solutions so far.

[ptrwllrt]

@stevematdavies did you manage to find a solution for that?

[jsardev]

Hey! As I also encountered some issues with this lib and couldn't solve it in a clean way so I decided to create my own library. It has some improvements comparing to this and most important - it works completely fine! 🚀 And what's most awesome - it's more a React-way of doing things, without assigning variables outside the component and other hacks. Reset functionality works fine here, you can check it out on the example page! Hope it helps 😄

Library: https://github.com/sarneeh/reaptcha Example: https://sarneeh.github.io/reaptcha/

[srvsankpal]

@snowcxt @ptrwllrt @Sawtaytoes @dozoisch did anyone was able to find the solution for this Im facing kind of the same issue right now

[Sawtaytoes]

@srvsankpal In my particular case, it's been years, and I don't work at the company where I was doing it.

I did use reCAPTCHA on a recent project and built it in myself rather than using a 3rd party library. Possibly not helpful, but it's an alternative to consider since this library is also just using their JS API.