Browser: Firefox
OS: Windows
This Bug has been around a few patches but I finally found the time to report it:
Bricks 2.0.1, frontend.js (bricks.min.js), Form element with reCAPTCHA v3 enabled.
When grecaptcha.ready() or grecaptcha.execute() fails on submit, the catch blocks in the form submit handler run:
recaptchaErrorEl.classList.add('show')
form.querySelector('.alert').innerText = `Google reCaptcha ${error}`
The form never contains an element with class alert. The error box is rendered by generate_recaptcha_html() in includes/elements/form.php as <div class="brxe-alert danger">. So querySelector('.alert') returns null and the browser logs:
Uncaught TypeError: can't access property "innerText", e.querySelector(...) is null
Impact: the real reCAPTCHA error (for example ReferenceError: grecaptcha is not defined when the script is blocked by a consent plugin, or “Invalid site key or not loaded in api.js” for a wrong key type) is swallowed. The user only ever sees the static text “Google reCaptcha: Invalid site key.”, which is misleading when the key is correct.
Steps to reproduce: enable reCAPTCHA on a form, block or remove the recaptcha/api.js script (or use a v2 key), submit the form, check the console.
Suggested fix: change the selector to .recaptcha-error .brxe-alert p (or .brxe-alert) and null-check before assigning innerText.
Best Regards
Suat