Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    16
    Vote Rating
    0
    fsuarez is on a distinguished road

      0  

    Default Keyboard opens up when touching the screen where a text field is about to show

    Keyboard opens up when touching the screen where a text field is about to show


    REQUIRED INFORMATION


    Ext version tested:
    • Sencha Touch 2.2
    • Sencha Touch 2.1
    Browser versions tested against:
    • Android 2.3.4 Browser
    • Android 4.1.2 Browser
    Description:
    Have a view ( A ) in which by pressing a button it will take you to another view ( B ).
    Have a text area on B which its at the same position as the button on A that will take you to B.
    When you press the button on A, B shows and the keyboard opens as if you would have press the
    text area on B.

    Test Case:
    app.js:
    Code:
    Ext.application({    name: 'hos',
    
    
        requires: [
            'Ext.MessageBox'
        ],
    
    
        views: [
            'Main',
            'AddNote'
        ],
    
    
        icon: {
            '57': 'resources/icons/Icon.png',
            '72': 'resources/icons/Icon~ipad.png',
            '114': 'resources/icons/Icon@2x.png',
            '144': 'resources/icons/Icon~ipad@2x.png'
        },
    
    
        isIconPrecomposed: true,
    
    
        startupImage: {
            '320x460': 'resources/startup/320x460.jpg',
            '640x920': 'resources/startup/640x920.png',
            '768x1004': 'resources/startup/768x1004.png',
            '748x1024': 'resources/startup/748x1024.png',
            '1536x2008': 'resources/startup/1536x2008.png',
            '1496x2048': 'resources/startup/1496x2048.png'
        },
    
    
        launch: function() {
            // Destroy the #appLoadingIndicator element
            Ext.fly('appLoadingIndicator').destroy();
    
    
            // Initialize the main view
            Ext.Viewport.add([
                Ext.create('hos.view.Main'),
                Ext.create('hos.view.AddNote')
            ]);
        },
    
    
        onUpdated: function() {
            Ext.Msg.confirm(
                "Application Update",
                "This application has just successfully been updated to the latest version. Reload now?",
                function(buttonId) {
                    if (buttonId === 'yes') {
                        window.location.reload();
                    }
                }
            );
        }
    });

    View A:
    Code:
    Ext.define('hos.view.Main', {
        extend: 'Ext.Panel',
    
    
        requires: [
            'Ext.Button'
        ],
        
        config: {
            items: [
                {
                    xtype: 'button',
                    text: 'Go to next view by taping outside of the text area',
                    handler: function () {
                        Ext.Viewport.setActiveItem(1);
                    }
                },
                {
                    html: "<br><br><br><br><br><br>"
                },
                {
                    xtype: 'button',
                    text: 'Go to next view by taping over the text area',
                    handler: function () {
                        Ext.Viewport.setActiveItem(1);
                    }
                }
            ]
        }
    });
    View B:
    Code:
    Ext.define('hos.view.AddNote', {
        extend: 'Ext.form.Panel',
        alias: 'widget.addNoteView',
        
        requires: [
            'Ext.Button'
        ],
        
        config: {
            id: 'addNoteView',
            layout: {
                type: 'vbox'
            },
            items: [
                 {
                    html: "<br><br><br><br><br><br>"
                },
                {
                    xtype: 'textareafield'
                },
                {
                    xtype: 'button',
                    text: 'Go back',
                    handler: function () {
                        Ext.Viewport.setActiveItem(0);
                    }
                }
            ]
        }
    });

  2. #2
    Sencha - Senior Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,892
    Vote Rating
    938
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    This is a known issue where the touch events get passed through.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

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

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

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

  3. #3
    Sencha User
    Join Date
    Jun 2012
    Posts
    16
    Vote Rating
    0
    fsuarez is on a distinguished road

      0  

    Default


    Is there a known workaround?

  4. #4
    Sencha User
    Join Date
    Jun 2012
    Posts
    16
    Vote Rating
    0
    fsuarez is on a distinguished road

      0  

    Default


    Because I create all the views when I navigate to them and destroy them when I'm done, this works great for me and I don't have to worry anymore at all:

    Code:
     Ext.define('hos.component.Text', {
         override: 'Ext.field.Text',
    
    
         initialize: function () {
            this.callParent();
            this.initializedAt = new Date().getTime();
         },
         
         onFocus: function (e) {
            this.callParent();
            if (e.time < this.initializedAt + 500) {
                console.log("Ext.field.Text override: bluring component as it was focused automatically");
                this.blur();
            }
         }
     });
    If you modify this workaround so it works even when a component remains alive all the time please share.

  5. #5
    Sencha User
    Join Date
    May 2010
    Posts
    12
    Vote Rating
    0
    eoliphan is on a distinguished road

      0  

    Default


    Has this been fixed? I'm seeing something similar in 2.2.1

  6. #6
    Sencha User
    Join Date
    May 2010
    Posts
    12
    Vote Rating
    0
    eoliphan is on a distinguished road

      0  

    Default


    Is there a imminent fix for this, or at least a recommended workaround? My primary target for the app I'm working on is android tablets, and this makes my app pretty much unuseable on the device

  7. #7
    Sencha User
    Join Date
    Jun 2014
    Posts
    8
    Vote Rating
    0
    arahlf is on a distinguished road

      0  

    Default


    Any update or workaround for this issue? I'm running into the same problem.