Cappuccino: Keyboard events getting squashed in reCAPTCHA input field

Question

I'm integrating a reCAPTCHA into my Cappuccino app and I have it all working besides this odd input functionality in the reCAPTCHA input text field: Only some keys seem to work, "qwrszcv" and a few other letters work fine, but most other keys don't work.

I borrowed some of the mapkit code to inject the reCAPTCHA script file in the head, then I inject the reCAPTCHA div into a custom CPView class I made.

Here is my constructor code:

- (id)initWithFrame:(CGRect)aFrame
{

    self = [super initWithFrame:aFrame];
    if (self != nil)
    {
        var DOMScriptElement = document.createElement("script");

        DOMScriptElement.src = "http://www.google.com/recaptcha/api/js/recaptcha_ajax.js";
        DOMScriptElement.type = "text/javascript";

        document.getElementsByTagName("head")[0].appendChild(DOMScriptElement);

        needsInitialization = YES;
        console.log(self);
    }
    return self;

}

And my initialization code:

- (id)initializeRecaptcha
{
    if (needsInitialization)
    {
        DOMRecaptchaElement = document.createElement("div");
        DOMRecaptchaElement.id = "recaptcha_div_id";


        var style = DOMRecaptchaElement.style,
            bounds = [self bounds],
            width = CGRectGetWidth(bounds),
            height = CGRectGetHeight(bounds);

        style.overflow = "hidden";
        style.position = "absolute";
        style.visibility = "visible";
        style.zIndex = 0;
        style.left = "0px";
        style.top = "0px";
        style.width = width + "px";
        style.height = height + "px";

        _DOMElement.appendChild(DOMRecaptchaElement);

        window.Recaptcha.create("my-recaptcha-key",
            "recaptcha_div_id",
            {
                theme: "clean",
                callback: window.Recaptcha.focus_response_field
            }
        );

        needsInitialization = NO;
    }
    else
    {
        window.Recaptcha.reload();
    }
}

I figure it has something to do with the way Cappuccino propagated events, but for the life of me I can't figure out a way to get this input to work.

Answer 1

I found a fix. I copied code from the keyDown method in CPTextField that propagates the events to the browser window to the keyDown method in my custom view that holds the recaptcha:

- (void)keyDown:(CPEvent)anEvent
{
    [[[self window] platformWindow] _propagateCurrentDOMEvent:YES];
    [self interpretKeyEvents:[anEvent]];
    [[CPRunLoop currentRunLoop] limitDateForMode:CPDefaultRunLoopMode];
}

Answer 2

Cappuccino attaches key event listeners at the document level in order to handle keyboard shortcuts. I'm not sure why some characters are getting through and others are not, but I wouldn't be surprised if it somehow corresponded to potential Cappuccino keyboard shortcuts. You might want to check CPPlatformWindow+DOM.j for more details on this.

In the meantime, an easy solution to your actual problem is to just drop the whole recaptcha widget into an iframe (you could use CPWebView or make your own). Just remember that in your event handlers inside of iframes you may have to pump the event queue manually with [[CPRunLoop currentRunLoop] limitDateForMode:CPDefaultRunLoopMode]; to let Cappuccino redisplay after you made changes from code outside of the run loop.