You found a bug! We've classified it as TOUCH-5196 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User debianw's Avatar
    Join Date
    Mar 2012
    Location
    Costa Rica
    Posts
    49
    Vote Rating
    2
    debianw is on a distinguished road

      1  

    Default Android keyboard hides form inputs

    Android keyboard hides form inputs


    Touch version tested:
    • Touch 2.3.1
    Browser versions tested against:
    • Android 4.x webview & chrome
    Description:
    • When tap on any input field then the keyboard shows up, but hides the active input.
    Steps to reproduce the problem:
    • Go to Kitchen Sink of Sencha Touch with and Android devices, then go to forms section, then tap on bio text area for example.
    The result that was expected:
    • After keyboard shows up, the page should scroll until you see the input.
    • iOS is a good example of a good expected result.
    The result that occurs instead:
    • Android keyboard hides the input.

  2. #2
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    3,936
    Vote Rating
    130
    fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all

      0  

    Default


    Thanks for the report. This is a known issue. Its Jira id is TOUCH-5196.
    Get more personalized support via a support subscription.

    Want to learn Sencha Touch 2? Check out
    Sencha training
    Sencha Touch in Action

    Need more help with your app? Hire Sencha Services services@sencha.com

    When posting code, please use BBCode's CODE tags.

    Need to include a test case use:
    The official Sencha Fiddle

  3. #3
    Sencha User existdissolve's Avatar
    Join Date
    Jan 2010
    Location
    Kansas
    Posts
    522
    Vote Rating
    85
    existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice

      2  

    Default


    I'm wondering if anyone has a workaround for this? I have this same issue in my Phonegap app built with Sencha Touch 2.3.1, and I have to say it's pretty much a deal-breaker for Android.

    I've seen this bug reported in other places as well, across several versions of Touch, but there does not seem to have been be a resolution over the several months that these separate reports represent. I would think that given how central form fields are to mobile apps (both packaged and otherwise), this would be a super-critical priority. Can anyone from the Touch team at least comment on possible workarounds or the potential for a hot fix?

    I've had to put some SUPER hacky code in my app in order to make it even usable, and it simply makes these sections of the app look amateurish.
    Before pasting your code, see if you can make a working example using Sencha Fiddle: https://fiddle.sencha.com/

    Not only will it let everyone see what you're talking about with their own eyes, but it also makes debugging your issue 19 billion times easier

    Embedding your newly created Fiddle is super-easy: Using Sencha Fiddle in the Forums

  4. #4
    Sencha User
    Join Date
    Mar 2012
    Posts
    3
    Vote Rating
    0
    corvinb4 is on a distinguished road

      0  

    Default


    I second the severity of this issue. I have code since 10/2013 with Touch 2.2.1 that scrolls the focus input into view. However, the latest Chrome (35 or 34) is making this issue worse.

    EDIT: The issue about Chrome 35 being worse is because I used -webkit-backface-visibility:hidden style. Nevertheless, the issue of retaining visual focus by the Touch framework still stands.

  5. #5
    Sencha User
    Join Date
    Mar 2012
    Posts
    5
    Vote Rating
    0
    Cualit is on a distinguished road

      0  

    Default I Second your oppinion

    I Second your oppinion


    Hi guys, I just wanted to say that we have the same issue as yours. It's basic needed functionality that is expected to work out of the box and it doesn't. In our case it simply makes our App unusable for our customer, therefore a major problem.

    This type of bugs are the ones that make me want to completely dump hybrid Apps and go to Native Apps.

  6. #6
    Sencha User
    Join Date
    May 2011
    Posts
    6
    Vote Rating
    4
    msardi23 is on a distinguished road

      0  

    Default


    Hi Guys - we also have this issue. This bug along with not being able to move the cursor in a text field really impacts the usability of forms on Android devices.

    I would have thought basic usability issues like this, that have a big impact on form based applications would be fixed as soon as possible, or some kind of suitable work around would be provided...

    Cheers,
    Matt

  7. #7
    Sencha User
    Join Date
    Mar 2013
    Posts
    49
    Vote Rating
    3
    janhar is on a distinguished road

      0  

    Default


    Same problem (ST 2.3.2).

    Android 2.3.6(Samsung GT-S6500) the usability is really horrible...
    Android 4.4 (SGSII) no negativ result(s) so far... Cordova Version: 3.4.1-0.1.0

    @Sencha: What is the current status of this issue?

  8. #8
    Sencha User
    Join Date
    Apr 2008
    Location
    Buenos Aires, Argentina
    Posts
    67
    Vote Rating
    1
    elmasse is on a distinguished road

      1  

    Default


    Better late than never. I have experienced this issue too in both Chrome and Cordova. My workaround works just fine if you don't have a fullscreen app in Cordova. I didn't tested yet for an orientation change. But for most use cases this solves the issue of the keyboard hiding the input.

    Just add these few lines into your app launch method:

    Code:
        launch: function () {
            if (Ext.os.is.Android) {
                Ext.Viewport.on('painted', function() {
                    Ext.Viewport.setHeight(window.innerHeight);
                });
            }
            //more launch code here
        }
    My $0.02
    Max

  9. #9
    Sencha User
    Join Date
    Aug 2014
    Posts
    14
    Vote Rating
    1
    memanuele is on a distinguished road

      0  

    Default


    My workaround requires some work but seems to be working fine in any circumstance.

    First add this code to your app:

    Code:
    Ext.application({
    
        name: 'MyApp',
    
        focusedField: null,
    
    
        launch: function() {
            this.addFieldScrollHandler();      
            
            ...
        },    
        addFieldScrollHandler: function() {
            Ext.Viewport.addListener('resize', function() {
                if(this.focusedField) {
                    var ost = this.focusedField.element.dom.offsetTop;
                    var parent = this.focusedField.getParent();
                    var scrollable;
                    while(parent && !scrollable) {
                        scrollable = parent.getScrollable();
                        parent = parent.getParent();
                    }
                    if(scrollable)
                        scrollable.getScroller().scrollTo(0, ost);
                }
            }, this);
        },
        registerField: function(field, {
            var me = this;
            field.addListener('focus', function() {
                me.focusedField = field;
            });
            field.addListener('blur', function() {
                me.focusedField = null;
            });
        },
        
    });
    And then for every field in your application do this:

    Code:
    MyApp.app.registerField(field);
    It basically scrolls to the currently focused field every time the viewport resizes. So it works when the keyboard shows up as well when you change orientation and the field is focused.

    I'm using this while waiting for a proper solution.

  10. #10
    Sencha User
    Join Date
    Feb 2014
    Location
    Madrid, Spain
    Posts
    13
    Vote Rating
    0
    egomezd is on a distinguished road

      0  

    Default


    Hi @memanuele,

    I´m trying your solution but it soesn´t work in my case. Are you using Phonegap/Cordova?

    I need to set:

    Code:
    android:windowSoftInputMode="adjustPan"
    to avoid all the elements are shrunk when the keyboard shows up but in that case, the resize event is not fired when the input fields gets focus.

    Did you face the same problem?

    Thanks in advance