Hybrid View

    You found a bug! We've classified it as TOUCH-2841 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    18
    Vote Rating
    0
    jochenp is on a distinguished road

      0  

    Default [ST 2.0.1] Event is not prevented causing keyboard to popup

    REQUIRED INFORMATION

    Ext version tested:
    • Sencha Touch 2.0.1 final
    Browser versions tested against:
    • Android mobile browser 2/3/4
    • iOS 5 Safari
    DOCTYPE tested against:
    • HTML5
    Description:
    • When having a list visible and opening a new view on item select which has an input field on the same location as you tap, the keyboard will popup.
    Steps to reproduce the problem:
    • Select item in list
    • opens new windows with input field on same screen location.
    The result that was expected:
    • simple view of the UI
    The result that occurs instead:
    • the keyboard pops up, because the input gets focus
    Test Case: Added example as attachement. It's a packaged version, but it shows the behavior.

    HELPFUL INFORMATION

    Example code steps:
    • package.zip attached
    • Open the app, press the 'do' button to add a record to the store (localstorage)
    • Press the 'Hello World!!!' list item to open the next window
    Example only shows searchfield in toolbar, but this also happens when opening forms with text inputs.

    The focus doesn't seem to happen on Chrome or Safari on Mac OS X
    Attached Files

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    38,605
    Vote Rating
    1143
    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

    Do you have an unminified version of app.js?
    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
    Jan 2012
    Posts
    18
    Vote Rating
    0
    jochenp is on a distinguished road

      0  

    Default

    yes, but I think you need more, I will added the source files.
    PS: this is a sandbox for testing all kind of issues, so the code is not example worthy
    Attached Files

  4. #4
    Sencha User
    Join Date
    Mar 2012
    Location
    Denver, CO
    Posts
    26
    Vote Rating
    1
    CarlosMS is on a distinguished road

      0  

    Default

    Confirming this behavior in my application running under 2.0.1 FINAL. In my effort to find a work around I ended up stopping the event in my listener with mixed results. My current Ext.Container (which has the Ext.dataview.List component) includes these code fragments:
    Code:
    ...
            var itemList = {
                xtype: 'itemlist',
                store: Ext.getStore('Items'),
                listeners: {
                    disclose: {
                        fn: this.onItemListDisclose,
                        scope: this
                    },
                    itemtap: {
                        fn: this.onItemTap,
                        scope: this
                    }
                }
            };
    
    
            this.add([topToolbar, itemList]);
        },
    
        onItemListDisclose: function(list, record, target, index, evt, options) {
            console.log("onItemListDisclose");
            evt.stopEvent();
            this.fireEvent('editItemCommand', this, record);
        },
        onItemTap: function(list, index, target, record, evt, options) {
            console.log("onItemTap");
            evt.stopEvent();
            this.fireEvent('editItemCommand', this, record);
        },
    ...
    The "stopEvent()" seems to have worked around the issue described in this report under mobile Safari (iOS 5.1 in an iPhone 4S device), but did not work in the mobile browser of an arbitrary Android phone I just happened to test my app. in (Android 2.2.2 in an LG Ally device).

  5. #5
    Sencha User
    Join Date
    Mar 2012
    Location
    Denver, CO
    Posts
    26
    Vote Rating
    1
    CarlosMS is on a distinguished road

      0  

    Default

    Also confirming that in addition to the Android device I mentioned, this is also reproducible in the Android SDK emulator (R19, Intel Atom x86 System Image w/API level 10).

  6. #6
    Ext JS Premium Member bobringer's Avatar
    Join Date
    Apr 2007
    Location
    New Jersey
    Posts
    71
    Vote Rating
    19
    bobringer will become famous soon enough bobringer will become famous soon enough

      0  

    Default Yep

    I'm only testing in the iOS Simulator, but I can in fact reproduce this 100% of the time...

  7. #7
    Sencha User
    Join Date
    Nov 2010
    Posts
    4
    Vote Rating
    0
    jikvo16 is on a distinguished road

      0  

    Default

    Is this fixed in some later release. I'm still observing the same problem in v.2.3.1

  8. #8
    Sencha User
    Join Date
    Jan 2015
    Posts
    1
    Vote Rating
    0
    MagmarFire is on a distinguished road

      0  

    Default

    After testing for a while with just plain HTML, in a very simplified example of what's happening in Sencha Touch, I can confirm that this is a matter endemic to touch events. (I created a JSFiddle to demonstrate this: http://jsfiddle.net/boo1bc8y/1 ; I recommend using Chrome in Device Mode or using an actual mobile device.)

    My test involves setting up a sort of "flypaper" div that listens for touchstart, touchend, and click events and that gets hidden on a touchend. It also involves an input field that also listens to these events. Upon running the fiddle, I attempt to click on the input with the flypaper over it, hopefully to prevent the touch event to give it focus. When I do, however, it turns out that after the touchend event is fired, a click event is fired a few milliseconds afterward, giving the input field focus. Testing this in Firefox in its own mobile mode results in something very similar.

    Note that if the flypaper is hidden by a click event, the input does not get focus. To get around this problem, it looks like Sencha Touch will need to have its components listen to click events, not touchend.

    Interesting note, as well: We also confirmed that on Apple devices and Firefox, if the user does a held touch (press the screen, hold it for a while [like, say, about a half second or longer], and then release), focus does not get passed to the input, either.