Fixing the Keyboard Issue on the Current Version of PhoneGap

23 Aug

PhoneGap currently has an issue with the keyboard not appearing whenever a form input is selected on a web site.  The key here is that the keyboard IS actually showing up, but it is being drawn behind the UIWebView used to render the webpage.

Here’s the solution I came up with.  I don’t understand enough about the rendering heirarchy to explain the why, but here’s the how:

In the GlassAppDelegate.m source file you should see a block of code that looks like the following:

 // Set up the image picker controller and add it to the view
	imagePickerController = [[UIImagePickerController alloc] init];

	// Im not sure why the next line was giving me a warning... any ideas?
	// when this is commented out, the cancel button no longer works.
	imagePickerController.delegate = self;
	imagePickerController.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
	[window addSubview:imagePickerController.view];

Simply move this block of code BELOW the following line. This renders the imagePicker object after the web view.

webView.delegate = self;

Problem – the imagePicker is obscuring the web view! Simply add the statment imagePickerController.view.hidden = YES; to the above block of code so that the entire block looks like:

 // Set up the image picker controller and add it to the view
	imagePickerController = [[UIImagePickerController alloc] init];

	// Im not sure why the next line was giving me a warning... any ideas?
	// when this is commented out, the cancel button no longer works.
	imagePickerController.delegate = self;
	imagePickerController.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
        imagePickerController.view.hidden = YES;
	[window addSubview:imagePickerController.view];

As it sounds like, we are just hiding the imagePickerController’s view – we don’t need it when the application starts anyways. But, we do need it when we access the images API through javascript, so find the block:

else if([(NSString *)[parts objectAtIndex:1] isEqualToString:@"getphoto"]){
				NSLog(@"Photo request!");
				NSLog([parts objectAtIndex:2]);

				webView.hidden = YES;
        [window bringSubviewToFront:imagePickerController.view];
				NSLog(@"photo dialog open now!");
}

and add the line imagePickerController.view.hidden = NO; above webView.hidden = YES; so that the entire block looks like:

else if([(NSString *)[parts objectAtIndex:1] isEqualToString:@"getphoto"]){
				NSLog(@"Photo request!");
				NSLog([parts objectAtIndex:2]);
        imagePickerController.view.hidden = NO;
				webView.hidden = YES;
        [window bringSubviewToFront:imagePickerController.view];
				NSLog(@"photo dialog open now!");
}

Voila! Compile and run the app and the keyboard should now appear when a form input is pressed on your iphone.

  • do you have all your changes posted anywhere?
  • No, sorry I made a bunch of other custom changes for my specific application
    so I didn't put them on github or anywhere else. Would you like the this
    GlassAppDelegate.m? I can't promise I didn't do something else in the code
    for my app though
  • no worries, i have a bunch of custom changes too... but was hoping to see some of this get centralized.
  • yeah, i hear ya - need to get git up and running so I can commit to my fork on github
  • This is a fantastic problem to run into. I started a discussion on the google group to discuss contributing. We need your feedback. I am prepared to offer support to anyone who needs help with git and plan to document the step by step procedure on how people can submit a pull request. Great work guys!

    http://groups.google.com/group/phonegap/browse_...
  • Sweet, that's the kind of kick in the pants I need to start contributing - i'll hop into that google group discussion
blog comments powered by Disqus