refactor v3 twig to support multiple recaptcha on the same page, and …

[minimit]

Hello, i've forked this plugin in our webgriffe projects, and with many iterations this is the final version of the recaptcha v3 we could come to.

It has different features:

• it supports multiple recaptcha on the same page
• it loads the recaptcha js only if the form is visible (not display: none) useful for pagespeed if you have the recaptcha on all pages inside modal for exampl
• it if the recaptcha form has a custom submit addEventListener, it prevents also them, and it calls them triggering click on the submit button instead of form.submit() which doesn't trigger submit listeners

[minimit]

Closes #151, closes #82, closes #290

[minimit]

Are there tests?

[Seb33300]

Just tested this PR on my project having issues related to multiple forms with recaptcha on a same page.
And this fixed our issue.

[mlaan-hnet]

Thank you for addressing the multiple recaptcha problem with your fix. I've been experiencing the same issue. I noticed that you submitted this pull request nearly a year ago. Could you please provide information on the steps required to incorporate your fix into the bundle?

[grimgit]

Hi,
the current code use the form submit() function, so the submit input is not submitted and $form->get('submit')->isCliccked() is always false.

The PR try to resolve the issue calling form.querySelector('[type="submit"]').click() but:

• if there are more then one submit input it always trigger the first submit input, so if there are a delete button and a save button in the same form the delete button is always triggered (!!!)
• if the form has no submit input the form is never submitted

I propose to call the click function on the event submitter (e.submitter) if present, otherwise fallback to the form submit() function

[minimit]

Hi, the current code use the form submit() function, so the submit input is not submitted and $form->get('submit')->isCliccked() is always false.

The PR try to resolve the issue calling form.querySelector('[type="submit"]').click() but:

• if there are more then one submit input it always trigger the first submit input, so if there are a delete button and a save button in the same form the delete button is always triggered (!!!)
• if the form has no submit input the form is never submitted

I propose to call the click function on the event submitter (e.submitter) if present, otherwise fallback to the form submit() function

Yes using e.submitter is better, I've made the commit