Form parameters showing up in address bar upon "ENTER"

[minamu1]

Hello,

I have a simple Ext.form.FormPanel for a user to sign in to the app. When testing in a Chrome browser, I noticed that when the user enters the ID and password, and instead of clicking/tapping the login button, just hits "Enter", the app just reloads and, worse, the ID and password that were already entered in the form fields show up as plain encoded text in the address bar.

Sample screenshots:

#1 - User has entered the login information and instead of clicking/tapping the big "Sign In" button, is about to just hit "Enter":

Screen Shot 2016-05-22 at 11.46.30 AM.jpg



#2 - The app has reloaded (and the form has switched to the default "Join" tab) and the login form parameters are now showing up in the address bar:
Screen Shot 2016-05-22 at 11.48.00 AM.jpg



My questions:

1. Why is hitting "Enter" causing this behavior of app reload instead of form submission?

2. Is there anyway to avoid the ID/pwd showing up in the address bar? Do I have to somehow capture the "Enter" and negate it, and force the user to click/tap the login button? Or do I capture the "Enter" and trigger the login button click/tap somehow?

If the user clicks/taps on the button, things are just fine - the app logs the user in and the address bar does not get populated with the user ID/pwd.

Any help is appreciated.

Thanks,

Mohamamd
San Jose, CA

[alex.volfson]

If you have submitOnAction set to true then this is the expected behavior. See http://docs.sencha.com/touch/2.4/2.4...submitOnAction

[minamu1]

Thanks for the information. I had double-checked this myself - I have not made any changes to submitOnAction and have left it as default.

My formpanel is as follows:

        var fPanel = Ext.create('Ext.form.FormPanel', 
        {
            xtype: 'formpanel',
            centered: true,
            height: '100%',
            width: formWidth,
            scrollable: false,
            items: [
                          {   xtype: 'spacer', height: 20 },
                {
                    xtype: 'fieldset',
                    style: 'padding-left:5%;padding-right:5%',
                    items: [
                        {
                            xtype: 'emailfield',
                            label: '',
                            placeHolder: 'E-mail',
                            cls: 'startScreenFields',
                            value: '',
                            name: 'email'
                        },
                        {
                            xtype: 'passwordfield',
                            label: '',
                            placeHolder: 'Password',
                            cls: 'startScreenFields',
                            value: '',
                            name: 'pwd'
                        }
                    ]
                },
                {   xtype: 'spacer', height: 20 },
                {
                    xtype: 'container',
                    style: 'padding-left:5%;padding-right:5%',
                    layout: 'hbox',
                    items: [
                    {
                        xtype: 'button',
                        flex: 1,
                        cls:'blueButton',
                        width: '100%',
                        text: 'Sign In',
                        handler: function() {
                            this.up('signinpanel').processSignIn(this.up('formpanel'));
                        }
                    }]
                },
                {   xtype: 'spacer', height: 20 },
                {
                    xtype: 'container',
                    layout: {
                        type: 'vbox',
                        align: 'center'
                    },
                    items: [
                        {
                            xtype: 'container',
                            padding: 4,
                            style: 'font-size:1.2em',
                            html: '<a>Forgot Password</a>',
                            listeners: {
                                element: 'element',
                                tap: function() {
                                    this.up('signinpanel').forgotPassword();
                                }
                            }
                        }
                    ]
                }
            ]
        });

The form panel works just fine if the "Sign In" button is clicked/tapped as expected. Any ideas as to what may be causing this issue? Interestingly, I have a searchBar object in my app. If I enter search text in the searchBar text field and hit "Enter", it works fine as expected and does not cause the app to reload with parameters showing up in the address bar.

Any help is appreciated.

Thanks,
Mohammad

[alex.volfson]

Does this only occur in chrome desktop? Does it occur on any mobile devices?