Last textfield in form gets focused

[aatiis]

We have the following problem in Mobile Safari (on iOS only): the last textfield (or textareafield) in a form gets automatically focused when the form is pushed to our main navigation view (using a ref with autoCreate: true.)

The view looks like this (CoffeeScript):

 1 ###
 2 #
 3 # Account Settings: Password page view.
 4 #
 5 ###
 6
 7
 8
 9 Ext.define "V.view.SettingsAccountPassword",
10     extend: "V.view.SettingsForm"
11     alias: "widget.settingsaccountpassword"
12
13     config:
14         title: "Password"
15         items: [
16             xtype: "fieldset"
17             title: "Old password"
18             items: [
19                 name: "password"
20                 xtype: "textfield"
21                 clearIcon: false
22             ]
23         ,
24             xtype: "fieldset"
25             title: "New password"
26             items: [
27                 name: "password_new"
28                 xtype: "textfield"
29                 clearIcon: false
30             ]
31         ,
32             xtype: "fieldset"
33             title: "Repeat new password"
34             items: [
35                 name: "password_new_confirm"
36                 xtype: "textfield"
37                 clearIcon: false
38             ]
39         ,
40             xtype: "panel"
41             layout: "hbox"
42             items: [
43                 xtype: "button"
44                 text: "Save"
45                 ui: "confirm"
46                 # The class name is to work around the flex bug:
47                 cls: "v-1-3"
48                 flex: 1
49             ,
50                 xtype: "spacer"
51                 flex: 2
52             ]
53         ]

[mitchellsimoens]

That's odd. You can work around this by not letting the refs create your view. I will report this as a bug.

Ext.define('Test.controller.Main', {
    extend : 'Ext.app.Controller',

    config : {
        refs : {
            myform : {
                autoCreate : true,
                selector   : 'myform',
                xtype      : 'myform'
            }
        },

        control : {
            'button' : {
                tap : 'pushForm'
            }
        }
    },

    pushForm : function(button) {
        var navView = button.up('navigationview');

        navView.push({
            xtype : 'myform',
            title : 'Form'
        });
    }
});

Ext.define('Test.view.MyForm', {
    extend : 'Ext.form.Panel',
    xtype  : 'myform',

    config : {
        items : [
            {
                xtype : 'textfield',
                label : 'One'
            },
            {
                xtype : 'textfield',
                label : 'Two'
            },
            {
                xtype : 'textfield',
                label : 'Three'
            }
        ]
    }
});

Ext.application({
    name : 'Test',

    controllers : [
        'Main'
    ],

    launch : function() {

        new Ext.navigation.View({
            fullscreen : true,
            items      : [
                {
                    title : 'Home',
                    items : [
                        {
                            xtype : 'button',
                            text  : 'Push View'
                        }
                    ]
                }
            ]
        });

    }
});

[aatiis]

I can reproduce this even when the view is not created by refs.

Ext.define('MyApp.view.Test', {
  alias: 'widget.test',
  extend: 'Ext.form.Panel',
  config: {
    xtype: 'fieldset',
    defaults: {
      xtype: 'textfield'
    },
    items: [{
      name: 'one'
    }, {
      name: 'two'
    }, {
      name: 'three'
    }]
  }
})

Ext.Viewport.setActiveItem({
  xtype: 'test'
})

The last textfield will be focused the first time this view is added to the viewport.