Sencha Touch 2 textfield's focus issue in iOS 7

Question

I'm having an issue with textfields in Sencha Touch 2, this is only occurring in iOS 7 and working fine in iOS 6 and Android.

The issue is when you tap a field the keypad opens but the cursor disappears, it should be focus on selected textfield but it does not. You have to tap the textfield again to focus.

I have checked this issue on iOS 6 and android (on devices as well as on simulators), working fine but not on iOS 7 only.

Is anybody having this issue...?

Is this a bug in sencha or should i missing something, please advice.

Thank you..

if i provide height to the panel (in my code i have given device height) then it works normally...but the textfields, which come under the keypad when it (keypad) opens on tap of textfield , are again loosing the focus... — Avin, Oct 09 '13 at 05:54
This worked for me: https://stackoverflow.com/a/19182670/6347279 — Roberto Rodriguez, Jun 09 '17 at 20:20

score 0 · Answer 1 · edited Oct 09 '13 at 21:05

0

I have found this to be directly related to two things:

centered: true
pack: 'center'

When I removed those lines, my app started playing nice. The challenge is to find an alternative way to center your panels.

edited Oct 09 '13 at 21:05

tbraun89

2,246
3
25
44

answered Oct 09 '13 at 20:46

user2864633

1

score 0 · Answer 2 · answered Nov 20 '13 at 03:42

I spent days figuring this out. Actually there is a problem with Sencha understanding the ViewPort height. In your index.html add a script block with the following code

if (window.device && parseFloat(window.device.version) == 7.0) {
   document.body.style.paddingTop = "20px";
   Ext.Viewport.setHeight(Ext.Viewport.getWindowHeight() - 20);
}

This does two things for you

It Provides enough space on Top to display the activity bar
It sets the Viewport height to be that of screen height, irrespective of the keyboard being present or not.

Also, If your app works in Portrait and Landscape mode, you will need to add these lines in your Viewport.js (or Main.js)

initialize: function(){
    Ext.Viewport.on('orientationchange', 'handleOrientationChange', this, {buffer: 0 });
},

handleOrientationChange: function(){
     try{
           if (parseFloat(window.device.version) == 7.0) {
            Ext.Viewport.setHeight(Ext.Viewport.getWindowHeight() - 20);
            }else{
            Ext.Viewport.setHeight(Ext.Viewport.getWindowHeight());
            }
      }catch(e){
                // do nothing
      }
},

And Yes, Make sure they Keyboard Bounce is TRUE in true (if you are using cordova). This will make sure your field does not get hidden.

Hope this works for you.

score 0 · Answer 3 · edited May 23 '17 at 11:49

0

add height="device-height" in viewport meta tag, fixes the issue.

ios7 issues with webview focus when using keyboard html

edited May 23 '17 at 11:49

Community

1
1

answered Dec 03 '13 at 06:27

Dinesh Kumar DJ

479
3
15

Sencha Touch 2 textfield's focus issue in iOS 7

3 Answers3