Results 1 to 2 of 2

Thread: Change event listener on Textbox is firing twice in Google chrome

Hybrid View

Previous Post Previous Post   Next Post Next Post
    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1

    Default Change event listener on Textbox is firing twice in Google chrome

    Hello All,

    We are having one strange behavior in Ext JS textbox. We have one pop up window in the application with barcode field as textbox, submit and cancel as buttons. Textbox "change" and "special key" events are wired up with the textbox. When user enters barcode manually and hits "Enter" key, it fires special key event and validates the barcode. We have barcode reader control which reads the barcode and displays it in to textbox. In this case, change event is fired. What is happening, if User hits "Enter" key in the Google chrome browser, it fires "Special Key" event and fires "Change" event twice.

    This behavior is noticeable only in Chrome but not in IE.



    Code:
    ApplicationSample.UserScanPopUp = {
        fields: {},
        locationId: '',
        showUserScanPopUp: function (options) {
            this.options = options;
            if (options.locationId) {
                this.locationId = options.locationId;
            }
            if (!this.userScanWin) {
    
    
                this.userScanWin = new Ext.Window({
                    title: 'Scan User Badge',
                    width: 400,
                    height: 150,
                    style: 'padding-top:10px',
                    modal: true,
                    closeAction: 'hide',
                    layout: 'form',
                    listeners: {
                        show: this.setBarcodeFocus,
                        scope: this
                    },
                    items: [
                    { xtype: 'box', html: 'Please Scan your Badge to Continue', width: 200, tabIndex: 2 },
                        this.fields.userBarcode = new Ext.form.TextField({ itemId: 'barcodeField', tabIndex: 0, xtype: 'textfield', fieldLabel: 'Barcode', width: 200, maxLength: 50, listeners: { change: this.onUserBarcodeChange, specialkey: this.onBarCodeSpecialKey, scope: this } })
                    ],
                    buttons: [
                        { text: 'Ok', tabIndex: 1, handler: this.onOk, scope: this },
                        { text: 'Cancel', tabIndex: 2, scope: this, handler: this.hideUserScanWin }
                    ]
                });
            }
            
            this.userScanWin.show();
        },
        hideUserScanWin: function () {
            this.userScanWin.hide();
        },
    
    
        onBarCodeSpecialKey: function (field, e) {    
            if (e.getKey() === e.ENTER) {
                this.processBarcode(field, field.getValue());
                //this.onUserBarcodeChange(field, field.getValue());            
            }
        },
    
    
        setBarcodeFocus: function () {
            var barcodeField = this.fields.userBarcode;
            barcodeField.setValue('');
            barcodeField.focus.defer(500, barcodeField);
        },
    
    
        onOk: function () {        
            var barcodeField = this.fields.userBarcode;
            if (barcodeField) {
                var value = barcodeField.getValue();
                this.onUserBarcodeChange('', value, '');
            }
        },
        onUserBarcodeChange: function (field, newValue, oldValue) {        
            if (newValue.length === 0 && newValue !== oldValue) {
                return;
            }
        
            this.processBarcode(field, newValue, oldValue);        
        },
    
    
        processBarcode:function(field,newValue,oldValue){
            Ext.Ajax.request({
                url: EH.BuildUrl('Barcode'),
                params: { action: 'Other', actionType: 'ScanUserBarcode', Barcode: newValue, LocationId: this.locationId },
                callback: function (options, success, response) {
                    if (success) {
                        var json = Ext.decode(response.responseText);
                        var result = json.result;
                        var barcodeType = result.BarcodeType;
                        switch (barcodeType) {
                            case 'L':
                            case 'I':
                                this.inValidScanType();
                                break;
                            case 'U':
                                this.onUserScan(result);
                                break;
                        }
    
    
                        if (barcodeType.length === 0) {
                            Ext.Msg.alert('Message', CSiQ.Messages.InvalidBarcode, this.setBarcodeFocus, this);
                        }
                    } else {
                        Ext.Msg.alert('Error', 'An unhandled exception occured', this.setBarcodeFocus, this);
                    }
                },
                scope: this
            });
        },
    
    
        inValidScanType: function () {
            Ext.Msg.alert('Error', 'Please make sure that you scan your badge', this.setBarcodeFocus, this);
        },
        isShowUserScanAuthenticationPopup: function (result) {
            var customValues = result.CustomValues;
            if (customValues) {
                var isTrackUser = (customValues.IsTrackUser === "1"),
                isLoggedIn = (customValues.IsLoggedIn === "1");
    
    
                //Need to prompt the user password if the user is a trackable and not logged in Or if it is not a trackable user
                if ((isTrackUser && !isLoggedIn) || (!isTrackUser)) {
                    this.showUserScanAuthenticationPopup();
                } else {
                    result.success = true;
                    this.options.onSuccess.call(this.options.scope || this, result);
                }
            }
    
    
        },
        onUserScan: function (options) {
            if (options) {
                var message = options.Message;
                var id = options.Id;
                var length = message.length;
                if (length === 0) {
                    this.displayName = options.Name;
                    this.barcode = options.Barcode;
                    this.hideUserScanWin();
                    this.isShowUserScanAuthenticationPopup(options);
                } else {
                    switch (message) {
                        case 'InactiveUser':
                            message = CSiQ.Messages.InactiveUser;
                            break;
                    }
                    Ext.Msg.alert('Message', message, this.setBarcodeFocus, this);
                }
            }
        },
        showUserScanAuthenticationPopup: function () {
            if (!this.userAuthenticationWin) {
                this.userAuthenticationWin = new Ext.Window({
                    title: 'User Authentication',
                    width: 400,
                    height: 150,
                    style: 'padding-top:10px',
                    modal: true,
                    closeAction: 'hide',
                    layout: 'form',
                    itemId: 'userAuthentication',
                    items: [
                        { itemId: 'userName', xtype: 'displayfield', fieldLabel: 'User Name', width: 200, name: 'UserName' },
                        this.fields.password = new Ext.form.TextField({ itemId: 'password', xtype: 'textfield', fieldLabel: 'Password', allowBlank: false, inputType: 'password', listeners: { specialkey: this.onSpecialKey, scope: this } })
                    ],
                    listeners: {
                        show: this.onUserAuthenticationFocus,
                        scope: this
                    },
                    buttons: [
                    { text: 'Ok', scope: this, handler: this.authenticateUser },
                    { text: 'Cancel', scope: this, handler: this.hideuserAuthenticationWin }
                    ]
                });
            }
            this.userAuthenticationWin.show();
    
    
            var displayName = this.displayName;
            if (this.firstName && this.lastName) {
                displayName = this.firstName + ' ' + this.lastName;
            }
    
    
            if (displayName.length !== 0) {
                this.userAuthenticationWin.getComponent('userName').setValue(displayName);
            }
        },
        onUserAuthenticationFocus: function () {
            var f = this.fields.password;
            f.setValue('');
            f.focus.defer(500, f);
        },
    
    
        onSpecialKey: function (field, e) {
            if (e.getKey() === e.ENTER) {
                this.authenticateUser();
            }
        },
        hideuserAuthenticationWin: function () {
            if (this.userAuthenticationWin) {
                this.userAuthenticationWin.hide();
            }
        },
    
    
        clearPassword: function () {
            this.userAuthenticationWin.getComponent('password').setValue('');
        },
        authenticateUser: function () {
            var password = this.userAuthenticationWin.getComponent('password').getValue();
    
    
            if (this.barcode.length > 0 && password.length > 0) {
                Ext.Ajax.request({
                    url: EH.BuildUrl('Security'),
                    params: {
                        action: 'Other',
                        otherAction: 'AuthenticateUser',
                        barcode: this.barcode,
                        locationId: this.locationId,
                        password: password
                    },
                    callback: function (options, success, response) {
                        var json;
                        this.clearPassword();
                        if (success) {
                            json = Ext.decode(response.responseText);
                            if (json.status === 0) {
                                if (!this.trackUser) {
                                    this.isValidNonTrackUser = true;
                                }
                                this.userAuthenticationWin.hide();
    
    
                                if (typeof this.options.onSuccess === 'function') {
                                    this.options.onSuccess.call(this.options.scope || this, json);
                                } else {
                                    this.onAuthenticationSuccess(json);
                                }
    
    
                            }
                            if (json.msg.length > 0) {
                                var message;
                                if (json.msg === 'UserPasswordExpired') {
                                    this.userAuthenticationWin.hide();
                                    CSiQ.Security.ChangePassword.barcode = this.barcode;
                                    CSiQ.Security.ChangePassword.userId = json.userId;
                                    CSiQ.Security.ChangePassword.source = 'LocationScan';
                                    CSiQ.Security.ChangePassword.show();
                                }
                                else {
                                    switch (json.msg) {
                                        case 'AccountLocked':
                                            message = CSiQ.Messages.AccountLocked;
                                            break;
                                        case 'AccountDeactivated':
                                            message = CSiQ.Messages.AccountDeactivated;
                                            break;
                                        case 'InvalidCredential':
                                            message = CSiQ.Messages.InvalidCredential;
                                            break;
                                        case 'UserWithoutRole':
                                            message = CSiQ.Messages.UserWithoutRole;
                                            break;
                                        default:
                                            message = json.msg;
                                            break;
                                    }
                                    Ext.Msg.alert('User Authentication', message, this.onUserAuthenticationFocus, this);
                                }
                            }
                        }
                    },
                    scope: this
                });
            } else {
                Ext.Msg.alert('Error', CSiQ.Messages.EnterValidPassword, this.onUserAuthenticationFocus, this);
            }
        },
        onAuthenticationSuccess: function () {
            this.hideuserAuthenticationWin();
        }
    };
    Code for calling this function from another JS file is as below.
    Code:
    CSiQ.UserScanPopUp.showUserScanPopUp({ scope: this, onSuccess: this.onUserAuthenticationSuccess, locationId: this.locationId });
    We are using latest version of Chrome [38.0.2125.101]

    Any help on this issue is highly appreciated.

    Thanks,
    Dhanvin.

  2. #2
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165

    Default

    Hi,

    Is there any way you can distill the test case down to just the necessary code to demonstrate the issue and post back here or through https://fiddle.sencha.com?

    Seth

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •