Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-5824] Android: WebView.evalJS Causes Form Input Fields to Lost/Not Retain Focus

GitHub Issuen/a
TypeBug
PriorityMedium
StatusClosed
ResolutionFixed
Resolution Date2013-07-26T09:53:38.000+0000
Affected Version/sRelease 2.1.0, Release 1.8.1
Fix Version/sSprint 2012-14 Core, Release 2.1.1, Release 3.0.0
ComponentsAndroid
Labelscore, module_webview, qe-testadded
ReporterRyan Asleson
AssigneeAllen Yeung
Created2011-10-14T08:37:20.000+0000
Updated2013-12-03T21:47:55.000+0000

Description

Problem Description

I'm using the WebView's evalJS function in a setInterval() to act as a bridge between Titanium and a web app from a remote web server. However, form fields in the web app on Android do not work -- I can tap into the form field, but the keyboard never comes up, or if it does, it disappears immediately.

Actual Results

The keyboard never comes up, with an error like this: ERROR: Error: Only the original thread that created a view hierarchy can touch its views.

Expected Results

The keyboard working just fine.

Test Case

1. Create new mobile project 2. Drop the following in app.js and run it on a simulator or actual device. Tap into the Google search box, and the keyboard may briefly appear before disappearing; either way you won't be able to type into the box.
var window = Titanium.UI.createWindow({
    title: "WebView.evalJS Focus Problem!"
});

var webViewOptions = {
  url: "http://www.google.com"
};

var webView = Ti.UI.createWebView(webViewOptions);
webView.addEventListener("load", function(e) {
	setInterval(doSomething, 1000);
});

window.add(webView);
window.open();

function doSomething() {
	try {
		var result = webView.evalJS("doSomethingOnTheWebView();");
	}
	catch(e) {
		Ti.API.info("\n\n\n\nERROR: " + e);
	}
}

Extra info

I have noticed that removing the try/catch block in the "doSomething" method causes the entire app to crash with a Java error, something about "JavaException: android.view.ViewRoot$CalledFromWrongThreadException: Only the original thread that created a view hierarchy can touch its views." To get around that error, I tried creating the WebView in the doSomething() method so that the WebView was created in the same thread in which it was used. This seemed to fix the error in the example given above, but in the app I'm building (which I unfortunately can't share in this public setting) the input boxes still lost focus. This same problem was reported on the Q&A several months ago, with no apparent resolution: http://developer.appcelerator.com/question/119845/using-webviewevaljs-and-lost-focus-android#comment-100385 I should add that the "lost focus" problem does not appear on the iOS simulator, using the app.js listed here.

Comments

  1. Matthew Apperson 2011-10-20

    Thank you for raising this ticket. I am afraid we need all the information listed in the [Jira Ticket Checklist](http://wiki.appcelerator.org/display/guides/Contributing+to+Titanium#ContributingtoTitanium-Summary%3AJiraTicketChecklist) in order to accept a ticket. In this case, we need more detailed environment info. Once this ticket is complete, we can move it to the main project. Thank you
  2. Matthew Apperson 2011-10-20

    Also, could you test this in 1.7.3 as well? Thanks, Matt
  3. Ryan Asleson 2011-10-21

    OK, I have updated the environment information so I think it's all complete. How do I reopen the bug or otherwise notify somebody that it's complete and can be looked at again?
  4. Max Stepanov 2012-06-26

    Updated test case: app.js:
       var win = Ti.UI.createWindow({
           backgroundColor: '#ccc'
       });
         
       var webView = Ti.UI.createWebView({ url: "test.html" });
       
       webView.addEventListener("load", function() {
       	Ti.API.info("webView loaded");
       	setInterval(doSomething, 1000);
       });
         
       win.add(webView);
           
       win.open();
       
       
       function doSomething() {
       	Ti.API.info("interval triggered");
       	try {
       		var result = webView.evalJS("getEvents();");
       		Ti.API.info("RESULT: " + result);
       	} catch(e) {
       		Ti.API.info("ERROR: " + e);
       	}
       }
       
    test.html:
       <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
       <html>
       <head>
           <title>blubb</title>          
       </head>
       <body>
       <input type="text" value="test" name="testName">
       <script>
       getEvents = function(){    
           return "events";
       }
       </script>   
       </body>
       </html>
       
  5. Allen Yeung 2012-07-11

    PR ready: https://github.com/appcelerator/titanium_mobile/pull/2540
  6. Max Stepanov 2012-07-13

    Backport PR for 2_1_X merged https://github.com/appcelerator/titanium_mobile/pull/2558
  7. Satyam Sekhri 2012-07-17

    Verified on: Titanium Studio: 2.1.1.201207161421 Titanium SDK: 2.1.1.v2012071618060 Android Device: LGP970 (V2.2), Samsung Galaxy Note (V2.3.6) Javascript Engine: V8
  8. Satyam Sekhri 2012-08-07

    Verified on Titanium SDK: 2.0.3.v20120806151610 Android Device: LGP970 (V2.2), Samsung Galaxy Nexus (V4.0.2) Javascript Engine: V8
  9. Priya Agarwal 2013-07-26

    Reopening just to update label.
  10. Priya Agarwal 2013-07-26

    Updated label. Closing as Fixed. Verified with: Studio: 3.1.1.201306131423 SDK: 3.1.2.v20130725180746 acs:1.0.3 alloy:1.1.3 npm:1.2.14 titanium:3.1.1 titanium-code-processor:1.0.1 OS: OSX 10.8 Device: HTC Desire(v4.0.3) Form Input Fields working fine with WebView.evalJS

JSON Source