Search code examples
androidiphonemobile-safaritouch-eventfennec

Is this a bug? Tapping an element can result in a different element receiving keyboard focus

I am trying to figure out whether an effect seen in Mobile Safari, Android Browser, and Firefox for Android ("Fennec") is a bug or expected behavior. Basically, the issue is that an <input> element can receive the keyboard focus in certain scenarios even if the <input> element was not originally tapped by the user.

Here is a reproducible test case:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, user-scalable=no">
<style>
#screenCover {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

#newItemInput {
    position: absolute;
    width: 200px;
    height: 20px;
}
</style>
</head>
<body>

<div id="screenCover"></div>
<input id="newItemInput" type="text">

<script type="text/javascript" language="JavaScript">
var screenCoverEl = document.getElementById("screenCover"),
    newItemInputEl = document.getElementById("newItemInput");

newItemInputEl.value = String(navigator.userAgent);

screenCoverEl.addEventListener("touchend", function (event) {
    // Move the <input> element in the way.
    newItemInputEl.style.top = (event.changedTouches[0].clientY - 10) + "px";
    newItemInputEl.style.left = (event.changedTouches[0].clientX - 10) + "px";

    // Hide the screen cover. Note that the screen cover was the original target of the tap.
    screenCoverEl.style.display = "none";
}, false);

newItemInputEl.addEventListener("click", function (event) {
    this.setSelectionRange(0, this.value.length);
}, false);
</script>
</body>
</html>

http://jsfiddle.net/f7TKc/2/

Or directly in a mobile browser:

http://fiddle.jshell.net/f7TKc/2/show/

In this example, a screen cover lies on top of the document, but on touchend, the screen cover is hidden and the <input> element is moved to where the user tapped the screen cover. In Mobile Safari, Android Browser, and Fennec 13.0b1, the <input> element inexplicably receives keyboard focus.

I am not able to test this in a newer version of Fennec because it crashes within the emulator.

Is this a bug or expected behavior?

Solution

  • Yes I think this is a bug and this might be on the same lines here : http://code.google.com/p/android/issues/detail?id=6721 and if its so, then the link has a few workarounds others have tried out which you can try