This issue duplicates another issue.
  1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    73
    Vote Rating
    1
    elad101 is on a distinguished road

      0  

    Default tap event fires two events on android

    tap event fires two events on android


    REQUIRED INFORMATION Ext version tested:
    • Sencha touch 2.0.1.1
    Browser versions tested against:
    • Safari iOS
    • Chrome on android
    • Android defalut browser
    Description:
    • Each time I click on the screen, two events is fired. ( Happens only on Android!)
    Steps to reproduce the problem:
    • Create a simple form with 6 text fields
    • Add focus event to one of the fields.
    • In the focus event function a popup will be created and shown
    • The popup will include an Ok button
    • The Ok button handler will destroy the popup
    The result that was expected:
    • The popup will be destroyed.
    The result that occurs instead:
    • The popup is destroyed and the field behind is in focus (two events is fired)
    Test Case:
    Code:
        
    {
                            xtype: 'container',
                            id: 'newcardcvvfieldset',
                            layout: {
                                type: 'hbox'
                            },
                            items: [
                                {
                                    xtype: 'textfield',
                                    cls: [
                                        'customField2'
                                    ],
                                    id: 'Depositcvvnumber',
                                    itemId: 'mytextfield9',
                                    width: 710,
                                    label: Messages.NEWCARDCVV2,
                                    labelCls: 'labelColor',
                                    style:'font-size:18px;',
                                    labelWidth: '49%',
                                    required: true,
                                    maxLength: 3,
                                    placeHolder: Messages.NEWCARDCVV2PLACEHOLDER,
                                    inputType: 'tel'
                                },
                                {
                                    xtype: 'button',
                                    id: 'cvvMakeDepositBtn',
                                    itemId: 'mybutton9',
                                    ui: 'btnlightBlue',
                                    style:'font-size:18px;',
                                    width: 31
                                }
                            ]
                        }
    //the listener
    listeners: [
                 {
                    fn: 'onCvvMakeDepositBtnTap',
                    event: 'tap',
                    delegate: '#cvvMakeDepositBtn'
                }]
    // the function
    onCvvMakeDepositBtnTap: function(button, e, options) {
            Ext.getCmp('cvvMakeDepositBtn').disable(true);
            this.popup = Ext.Viewport.add({
                xtype: 'panel',
                floating:true,
                modal:true,
                centered:true,
                width:310,
                hideOnMaskTap:false,
                id:'DepositCvvAlertPanel',
                height:240,
                //style:'margin-left:5px;',
                styleHtmlContent:true,
                items:[{
                    docked:'top',
                    xtype:'toolbar',
                    ui:'lightBlue',
                    title:CVVtitle
                },{
                    html:CVVAlertMsg
                },{
                    xtype:'button',
                    id:'cvvOkButton',
                    text:OkButton,
                    ui:'btnlightBlue',
                    //centered:true,
                    style:'font-size:16px;margin-top:0px;',
                    height:40,
                    handler: function(){
                        Ext.getCmp('DepositCvvAlertPanel').destroy();
                        Ext.getCmp('cvvMakeDepositBtn').enable(true);
                        DoubleClickFlag = true;
                    }
                }]
    
            });
            if (DoubleClickFlag){
                hideKeyboard();
                this.popup.show('pop');
                DoubleClickFlag = false;
            }
        },
    HELPFUL INFORMATION Screenshot or Video:
    • NA
    Possible fix:
    • not provided
    Additional CSS used:
    • sencha-touch.css
    • custom css files
    Operating System:
    • Android 2.3.3 + 3 + 4 + 4.1

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Vote Rating
    847
    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. Do note that Sencha Touch does not support Android 3 also.

    http://www.sencha.com/forum/showthread.php?230087
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    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
    Feb 2012
    Posts
    73
    Vote Rating
    1
    elad101 is on a distinguished road

      0  

    Default


    What do you mean by Doesn't support Android 3?
    Basically most of the andriod devices is 3 based?!
    Never the less My application works on android 3 and on android 2.3.3 also, of course except for couple of bugs...

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Vote Rating
    847
    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

      1  

    Default


    Meaning it may work but things may not work as we don't support Android 3 as it's browser has too many inconsistencies to support.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    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.

  5. #5
    Sencha User
    Join Date
    Feb 2013
    Posts
    26
    Vote Rating
    0
    JustAndrei is on a distinguished road

      0  

    Default


    I'm experiencing the same problem now, but only on selected combinations of devices and browsers.

    Samsung Galaxy Ace, Android 2.3.7, stock browser - OK
    Samsung Galaxy Ace 2, Android 4.1.2, stock browser - taps are doubled
    Samsung Galaxy S III, Android 4.1.2, stock browser - taps are doubled
    Samsung Galaxy S III, Android 4.1.2, Google Chrome - OK
    Samsung Galaxy Tab 7-2 (GT-P3110), Android 4.0.4, stock browser - taps are doubled
    Samsung Galaxy Tab 7-2 (GT-P3110), Android 4.0.4, Google Chrome - OK
    Apple iPhone 4, Safari - OK
    Apple iPhone 5, Safari - OK

    Tested with ST 2.2.0 and 2.2.1.

    I wonder if there's any workaround for this problem...

  6. #6
    Sencha User
    Join Date
    Feb 2013
    Posts
    26
    Vote Rating
    0
    JustAndrei is on a distinguished road

      0  

    Default


    How the problem looks like.
    If you tap a toggle field, it slides on and instantly off (or vice versa), as if you tapped twice.
    If you have a button, which switches to another view, and that view has another button in the same place of the screen, that button gets tapped too.

  7. #7
    Sencha User
    Join Date
    Feb 2013
    Posts
    26
    Vote Rating
    0
    JustAndrei is on a distinguished road

      0  

    Default


    It's "funny", but...
    Samsung Galaxy S III, Android 4.1.2, stock browser - taps are doubled
    Samsung Galaxy S II, Android 4.1.2, stock browser - OK

  8. #8
    Sencha User
    Join Date
    Feb 2013
    Posts
    26
    Vote Rating
    0
    JustAndrei is on a distinguished road

      0  

    Default


    Similar problem has been resolved(?) in Leaflet.
    https://github.com/Leaflet/Leaflet/pull/1227

  9. #9
    Sencha User
    Join Date
    Feb 2013
    Posts
    26
    Vote Rating
    0
    JustAndrei is on a distinguished road

      0  

    Default


    More info:

    Two taps' event types: touchend + mouseup.
    Single tap event type: mouseup.

    So, maybe to ignore the touchend event is the solution?

  10. #10
    Sencha User
    Join Date
    Feb 2013
    Posts
    26
    Vote Rating
    0
    JustAndrei is on a distinguished road

      0  

    Default Fix candidate

    Fix candidate


    Here is my version of a fix:

    Code:
    var proto = Ext.event.Controller.prototype;
    proto.original_Fire = proto.fire;
    proto.lastTouchEndArgs = null;
    proto.fire = function( args, action ) {
        if( args && args[0] ) {
            if( args[0].type == "touchend" ) {
                this.lastTouchEndArgs = args;
            }
            else if( args[0].type == "mouseup" ) {
                if( this.lastTouchEndArgs && args[0].time - this.lastTouchEndArgs[0].time < 500 ) {
                    return this;
                }
                else {
                    this.lastTouchEndArgs = null;
                }
            }
        }
        return this.original_Fire( args, action );
    }