80
Views
6
Comments
Solved
[Google reCAPTCHA React] ReCAPTCHA placeholder element must be an element or id
google-recaptcha-react
Reactive icon
Forge asset by Leandro Oliveira
Application Type
Reactive

Hello,

On pages works well but PopUps I'm having this error:

I noticed that ReCaptchaId is always 0.

If we change the JS of render captcha this problem will be fixed but after on Recaptcha execute a different error will be present saying that the ReCaptcha for ID that we are passing it was not loaded.

Any idea how we can solve the problem?

Thanks

2019-10-25 19-52-02
Leandro Oliveira
Champion
Solution

Hi Paulo,

The Recaptcha component renders itself on the div with class .active-screen, as recommended by Outsystems:

The problem is that Outsystems itself is not appending a popup inside the div.active-screen:

We can see that the popup HTML element is outside the div.active-screen. As the component considers this selector to render the Recaptcha it doesn't find the element.

A workaround would be to remove this selector from the Recaptcha private block:


As I think that Outsystems will fix this behavior I wouldn't change the Forge version itself, but a local fix.


Dont forget to mark the post as solved if it helped your case, so it can help others.

Regards,

Leandro Oliveira

2019-10-25 19-52-02
Leandro Oliveira
Champion
Solution

I'm attaching a working version of the Catpcha and Demo (both clones).

The only change was the mentioned one, to remove the .active-screen selector from querySelector:

For the id, it's the default to start with 0 and auto increments each time a recaptcha is loaded. It resets after a page load, this is Google's behavior. It can be seen in the example by opening and closing the popup for Invisible Recaptcha:

Regards,

Leandro Oliveira

CloneOfreCAPTCHAReactDemo.zip
2023-08-28 07-00-10
Paulo Torres
Champion
Solution

Hi Leandro,

I have the same issue with your version but at least works.

Do you think is because we are getting always the ID = 0 ?

Thanks, Paulo Torres

2023-08-28 07-00-10
Paulo Torres
Champion

Someone?

2019-10-25 19-52-02
Leandro Oliveira
Champion
Solution

Hi Paulo,

The Recaptcha component renders itself on the div with class .active-screen, as recommended by Outsystems:

The problem is that Outsystems itself is not appending a popup inside the div.active-screen:

We can see that the popup HTML element is outside the div.active-screen. As the component considers this selector to render the Recaptcha it doesn't find the element.

A workaround would be to remove this selector from the Recaptcha private block:


As I think that Outsystems will fix this behavior I wouldn't change the Forge version itself, but a local fix.


Dont forget to mark the post as solved if it helped your case, so it can help others.

Regards,

Leandro Oliveira

2019-10-25 19-52-02
Leandro Oliveira
Champion

I have created this idea to fix this bug:

https://www.outsystems.com/ideas/12712/append-popup-inside-active-screen/

Regards,

Leandro Oliveira

2019-10-25 19-52-02
Leandro Oliveira
Champion
Solution

I'm attaching a working version of the Catpcha and Demo (both clones).

The only change was the mentioned one, to remove the .active-screen selector from querySelector:

For the id, it's the default to start with 0 and auto increments each time a recaptcha is loaded. It resets after a page load, this is Google's behavior. It can be seen in the example by opening and closing the popup for Invisible Recaptcha:

Regards,

Leandro Oliveira

CloneOfreCAPTCHAReactDemo.zip
2023-08-28 07-00-10
Paulo Torres
Champion

Hi Leandro,

I found this way and works but not perfect.

After login I have this error on console:

I'll check if works better with your solution and let you know.

Many thanks

2023-08-28 07-00-10
Paulo Torres
Champion
Solution

Hi Leandro,

I have the same issue with your version but at least works.

Do you think is because we are getting always the ID = 0 ?

Thanks, Paulo Torres

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.