* 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. broken.jpg working.jpg
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.
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.