When I explicitly render Recaptcha v2 and then reset it before removing it from the DOM, after ~40 seconds I get an error in the browser console.
I have a JSFiddle which can be used to reproduce the issue.
Here's the relevant code excerpt:
const recaptchaHolder = document.getElementById('...');
const recaptchaWidgetId = grecaptcha.render(recaptchaHolder, {/*...*/});
// then later
grecaptcha.reset(recaptchaWidgetId);
recaptchaHolder.parentElement.removeChild(recaptchaHolder);
The error that I get is:
Uncaught (in promise) Timeout
with the following stacktrace (the actual stacktrace might vary since it happens in heavily minified code):
setTimeout (async)
J @ recaptcha__en.js:100
(anonymous) @ recaptcha__en.js:285
tb @ recaptcha__en.js:284
mj @ recaptcha__en.js:456
(anonymous) @ recaptcha__en.js:458
I've tried to utilize the 'error-callback'
parameter from the documentation to catch this error, but that did not help - the error is still uncaught, and this callback does not get invoked.
Another observation: if I omit calling grecaptcha.reset
before removing the element from the DOM, then the error does not happen. However, it might result in inconsistent UI: if the user is challenged by recaptcha (for example, using images), and the element is simply removed from DOM without calling grecaptcha.reset
, then the challenge HTML is not cleaned up from the DOM.
I'm looking for ways of either handling the above mentioned error, or handling recaptcha removal in a different way (if I am doing it wrong now)