iPhone random focus input field

[troels]

Im experiencing weird, undesired and probably default behavior on iPhone with input fields.

Observe the following view:

Ext.define('app.view.operationalStatus.Search', {
    extend: 'Ext.Panel',


    config: {
        scrollable: 'vertical',
        items: [
            {
                xtype: 'container',
                cls: 'nc-htmlstyledbox',
                items: [
                    {
                        xtype: 'panel',
                        html: '<h1>Headline</h1>' +
                            '<p>Blah blah blah blah blah blah blah blah blah blah.</p>'
                    },{
                        xtype: 'spacer',
                        height: 20
                    },{
                        scrollable: false,
                        xtype: 'fieldset',
                        items: [
                            {
                                xtype:'textfield',
                                name: 'phone',
                                placeHolder: 'Phone number',
                                autoCapitalize: true,
                                required: true,
                                clearIcon: true
                            },
                            {
                                xtype: 'textfield',
                                name: 'casenumber',
                                placeHolder: 'Case number',
                                required: true,
                                clearIcon: true
                            }
                        ]
                    },
                    {
                        xtype: 'button',
                        text: 'Search',
                        action: 'lookupOperationalStatus'
                    }
                ]
            }
        ]
    }
});

Whenever i make this view active in the card layout, on the iPhone, it immediately brings focus to the second input field, bringing up the keyboard and everything. I know that there's some fuzz with bringing focus to an input field programmatically, because such an action has to be user initiated. But in my case, the only user initiated action is the button push that makes the view active; the focus to the second input field just happens magically.

I have also experienced this on other views with input fields, where iPhone sometimes give focus to an input field, depending on whether the load mask is on the view or not.

How do I make it stop doing that?


Thanks

[troels]

I managed to get a step closer to this.

It seems the field selection is not random. What actually happens is, that the button press that leads to the above mentioned view is a custom button. This button lives in a div tag and if i press somewhere on the div tag, where the view with the input fields are going to be placed in the future when the view becomes active in the card layout, that input field gets focus.

It is as if the tab event is propagated to the next view, even though it is not even created when the button is pressed.

[troels]

I still have no clue why the behavior is like this, but i think i found an error in the sencha framework.

By button component is heavily inspired by the default ST button, meaning that it's tap event it set up in exactly the same way. For the source look at: http://docs.sencha.com/touch/2-0/source/Button.html#Ext-Button

In the doTap method we have:

doTap: function(me, e) {
    var handler = me.getHandler(),
        scope = me.getScope() || me;


    if (!handler) {
        return;
    }


    if (typeof handler == 'string') {
        handler = scope[handler];
    }


    //this is done so if you hide the button in the handler, the tap event will not fire on the new element
    //where the button was.
    e.preventDefault();


    handler.apply(scope, arguments);
}

To stop this non-sense behavior on iPhone, the e.preventDefault() call has to be executed even if there is no handler attached. I expect that a handler should be rarely set with the new pattern of refs and control in controllers in ST2. Alternatively, an empty handler can be set.

[bstrappazzon]

Hi,

I have exactly the same issue but with textfield.
I have a simple login form with two field and a button to authenticate.

It give access to a large profile form where user can edit its data.

On the second form, the focus is always made on the field which match (position) with the password field in the previous form.

As you said, it looks like the event is persisted and applied to newly created components.
I don't know if I'm clear, it's an easy thing to explain.

However I did not find any workaround on this point and I would appreciate any suggestion.

Thanks,

Benjamin

[troels]

Hello Benjamin,

The solution I posted worked for iPhone (tested on 4S) and newer Android phones. It seems tho, that some gingerbread phones still seem to have this behavior, where the click event is repeated on the replacing view.

I haven't found a good solution for it, but have seen people use a delayed action (either in the controller og button handler). I presume this would, for instance, first handle the event without replacing the view, make the event die completely, then replace the view.

This is still an issue in my app, so please post the solution, if you find one.

[bstrappazzon]

Thanks for your feedback.

I hope I will find a solution soonly and for sure i will share it there.

I tried to delay the handler but it did not work for me.

benjamin

[sutong324]

After review Button.js 's code I know how to fix this bug which many people faced the same problem and I do not want to has it alone.

You can add below code in your own tap event method before show another page:

if (e && e.preventDefault) {
e.preventDefault();
}