ReCAPTCHA 2 + JQuery + IE 9/10/11 - Need to double-click in modal dialogs

[Jaroslav Kačer]

Hello everyone!

After upgrading to the new version of ReCaptcha, we are facing an annoying problem in Internet Explorer 9/10/11 (did not test in older versions).

If we insert it into a JQuery dialog with the "modal" property set to true, all buttons on the validation widget must be double-clicked to work. A single click never works. The buttons are: the reload button, the audio button, the info button, and finally the big blue submission button.

The selection buttons with images work just fine.

This issue applies both to automatic and explicit rendering, as described at Displaying the widget.

Has anybody encountered this issue? Did you solve it somehow?

I have realized that if I set the dialog to be non-modal, everything works as expected.

Also, it works just fine in Firefox and Chrome.

Currently I am considering replacing JQuery dialogs with something else, to see if this solves the issue.

I would really appreciate any hint or help. Thank you!

Best Regards,

   Jarda

[Jaroslav Kačer]

For those who have the same problem:

I solved this problem by replacing JQuery modal dialogs with FancyBox modal dialogs. Then ReCaptcha works as expected, even under IE 9/10/11.

Unfortunately I was not able to solve the problem using JQuery dialogs.

Best Regards,

   Jarda

[Big Evil Brain]

I found a fix. In jquery-ui.custom.js you need to edit the _createOverlay function.

Comment out or delete the line that says this:

$(".ui-dialog:visible:last .ui-dialog-content").data( widgetFullName )._focusTabbable();

What's happening is that when you click somewhere outside the modal (such as in the reCAPTCHA iframe) the dialog "steals back" the focus.

[Big Evil Brain]

Forgot to mention that this is jQuery UI v1.10.3

In jQuery UI v1.11.4 the line in question looks like this:

this._trackingInstances()[ 0 ]._focusTabbable();

Cheers!

[Joe C]

Any way to do this without hacking the jQuery source, such as overriding that item somewhere else in Javascript?

[Joe C]

I just realized this says JQueryUI.  I'm only using JQuery with Bootstrap, but it still presents the same issue with ReCaptcha...

[Big Evil Brain]

It looks like Bootstrap has a similar issue. I have not tested this, but search the Bootstrap code for "Modal.prototype.enforceFocus" and comment out "this.$element.trigger('focus')".

The root of the issue is, clicking outside of the Modal (jQuery or Bootstrap) will trigger code that forces the "focus" back to into the Modal (usually the first element.)

The ReCaptcha pop-up doesn't like this...

[Joe C]

Hi BEB, 

I responded to another post (https://groups.google.com/d/msg/recaptcha/NVGRytYCAjA/ZlG2GnrcBgAJ) that this solution worked: 

 

The hack mentioned worked for me (http://stackoverflow.com/a/28965638/1294363): 
$.fn.modal.Constructor.prototype.enforceFocus = function () { };

Still hacky, though. :-/