View Full Version : Android: Two fields show up on text field focus

1 Mar 2011, 4:15 PM
* Android 2.2
* Sencha Touch 1.0.1a
* Sencha Touch 1.0.2
* When putting focus on a text field, Android draws another copy of the input field elsewhere on the screen. Tapping to focus on another field changes the input field, but the OS input continues to be in the wrong place.

My app setup consists of a main app wrapper, which contains the home screen, which contains a panel wrapping an html item and carousel that contains the login fieldsets (two different locations - not my API). Basically the HTML is static above the carousel so you can swipe the bottom half left/right.
If the html item and toolbar are present (and/or), the text inputs will get the double-entry fields. See the attached broken.png for a visual demonstration of the error. Note that the focused field is the password field and I did type in "password". Yikes.

Removing the docked toolbar and the html content panel will push the fieldset up the screen as expected, and the OS-drawn input lines up perfectly over the HTML-drawn field.

Screenshot or Video:
See the attached files: broken, working (handset - HTC Incredible; works same in emulator). Note: in broken.png the active field is actually the password field (typed in "password").

Debugging already done:
Tried both versions - with and without panel content above the fieldset. Taking stuff out fixes it in this case. If I add additional HTML content items *within* the carousel card, that does not affect the field draw positions.

Possible fix:
I believe this partially has something to do with where the top of the form field is located v.s. where Javascript thinks it's located. I don't know if Android tries to scroll the content up (can't) before adding the OS input field, but it seems like the mis-reported Y-pos of the field is the cause.

15 Mar 2011, 6:19 AM
I see this on prompt dialogs in Android 2.2 HTC evo.

Any solution?


18 Mar 2011, 12:17 AM
I have a similar problem. Well I had the problem when I put the fields in a Carousel. I changed the layout to a regular panel and it works as intended and I have no idea why.

I messed around with some scrolling and random tapping and I also think it might have something to do with where something thinks it's supposed to draw the field.

18 Mar 2011, 7:39 AM
I've had similar problems. I wonder if it has something to do with whether or not the content is rendered in DOM or not.

18 Mar 2011, 7:44 AM
Yeah, my problem was with a text field in a prompt dialog, which was being launched from and displayed over a carousel.

I ended up using an action sheet instead and it works fine.

I haven't tried putting a form (text field) in a carousel panel.

18 Mar 2011, 7:51 AM
Ah. Sounds like the same problem either way. I checked out the Sencha blog post on the Pier 1 mobile site on my HTC Incredible and they're experiencing the same thing with form fields getting taken over and/or displayed wrong on the screen. I'm not sure how much JS can coerce the browser.

3 Jun 2011, 7:13 PM
Yes, passwordfield is so strange. don't metion the carousel , the simple form contains passwordfield just has this problem.

have you solved the problem? waiting your message

5 Jun 2011, 8:38 AM
Considering that second field is outside the DOM, there's not much we can do about it directly. I had some *luck* with this once by trying some alternative layouts. In my case I switched from putting a form field inside a carousel to just making it a regular card. I have a suspicion that it might have something to do with nesting panels and cards, though I can't say for certain because i've been unable to reproduce it (not that I want to).

Going back to the DOM thing - I believe it may be a webkit/android bug because it seems like the browser thinks the field is somewhere else in the viewport. Could Sencha fix this somehow, or is this a Sencha bug? Maybe.

6 Jun 2011, 4:40 PM
Thank you very much, and i also post a bug report
Hope the Sencha developer can notice it.

30 Aug 2011, 4:04 AM
If it helps, I'm not inside a carousel, and it also happens with all types of text fields, not just password types.

31 Aug 2011, 3:53 AM
read this
(http://www.sencha.com/forum/showthread.php?115290-Animations-on-Android-flickering/page2)and Sencha-Touch release note

Animations on Android devices may still cause flickering (http://dev.sencha.com/deploy/touch/release-notes.html)
Focusing on form fields at the bottom of the screen might not work properly on Samsung Galaxy S (http://dev.sencha.com/deploy/touch/release-notes.html)

17 Sep 2011, 4:41 PM
This problem does not occur with the very first text entry field, it only happens on subsequent entry fields - this is probably why some of the people on this page are saying it is a password type text input causing problems (as the second field is a password type). I am getting really serious problems by the way, sometimes, it is just the double text entry appearing, but mostly I get a strange problem where, when the android keyboard is showing, the page tries to re-draw itself so that the bottom of the page is at the top of the keyboard, which means that I cannot see any of the form as it has all been pushed out of the top of the viewport, but then, it tries to redraw itself again and again in an infinite loop making the form impossible to use

13 Feb 2012, 3:10 AM
This thread is almost a year-long, and still no answer from Sencha Developers.
Here is an applause from struggling sencha users:

I'm also having this bug.
I can see this behavior of copied textarea even if I have only one form field on the page (that exact textarea). At the same time, page is working flawlessly on iOS.
Did anyone find a solution for this?

14 Feb 2012, 1:46 AM
The problem goes away on iOS and Android if you use Sencha 2 but be careful to check the current license agreement for Sencha 2.

14 Feb 2012, 7:19 AM
After hours of pulling the hair of the head, I have found the source of my problem.
So, yes, I had applied fieldset to the form and have commented out that 3d translations and webkit-backface-visibility stuff in css. But the problem was still there.
And finally I've found, that using doLayout() was breaking the textareas.
My page was working like the following: I was creating the page, than I was dynamically adding forms to the viewport and called doLayout() to refresh the viewport.
So I had to refactor my code so it generates viewport with the form already in it, so I don't need to call doLayout().
And with addition to using fieldset and css hacks, the textareas and text input fields became workable.

But, it still works bad in Carousel - anyway, this is the lesser of the possible evils.

p.s. I was also thinking about Sencha Touch 2. But, wait, it's still a BETA. If the official Sencha Touch v1.1.1 has so many problems, who knows how many problems can be in beta? So I decided to stick with v1.1.1 for now.