Multiple forms implementing recaptcha don't show the badge

Question

Description

I have implemented ng-recaptcha on an angular app.

Scenario:

Parent component has two child components both implementing recaptcha. Both the child components are within collapsible panels.

Problem:

Only when the 2nd component is activated via a collapsible panel the recaptcha badge shows up. When the 1st component is activated via the first collapsible panel the recaptcha gets hidden.

Question:

Is there way I can force the recaptcha badge to be displayed for the first component as well?

Code Sample:

 <re-captcha #recaptcha="reCaptcha" 
            size="invisible" 
            name="captcha" 
            [(ngModel)]="formModel.captcha" 
            required 
            (resolved)="$event && callMethod($event, 'Upload')">
</re-captcha>

Lib versions:

ng-recaptcha: 5.0.0

Angular: 9

Typescript (tsc --version): 3.8.3

Posted on GitHub too -

GitHub - Multiple forms implementing recaptcha don't show the badge

Answer 1

DethAriel commented on the GitHub issue on Sep 12:

Hi @siva-saripilli, and thank you for submitting the issue!

From what I see, absence of the badge does not prevent recaptcha from functioning properly. Take a look at this example.

Open the console tab in stackblitz and observe its output while you navigate from "Crisis Center" to "Login" -- invisible recaptcha is being executed properly, which is seen by the appropriate log statements.

Now, I understand that the absence of the badge can be perceived as an inconvenience. However, the exact functionality of this badge is not controllable by ng-recaptcha library, I'm afraid -- it's part of core recaptcha functionality. Based on publicly available recaptcha API it doesn't appear to be controllable, so I'm afraid I have to close this issue as invalid.

If, however, you find that this explanation does not represent the issue you observe, feel free to open a new bug with reproduction scenario attached.