Cannot set focus to searchfield in iOS

[nixta]

REQUIRED INFORMATION




Ext version tested:

• Sencha Touch 2.0.1-rc

Browser versions tested against:

• iOS (5.1, device and Simulator) Safari
• Google Chrome 18.0.1025.162
• Safari 5.1.5

Description:

• When you click the button at the bottom of this sample, a panel displays with a single search field in it. I cannot set the focus to the search field under 2.0.1-rc. The focus is set correctly in Chrome and Safari on the desktop. I had this working before updating to the 2.0.1-rc.

Steps to reproduce the problem:

• Browse to page in either iOS Simulator or on iOS device.
• Click the "Address" button.

The result that was expected:

• Search field appears with cursor at the end and the iOS keyboard visible.

The result that occurs instead:

• Search field appears, but does not have focus.
• User must tap in the search field to display the iOS keyboard.

Test Case:

    Ext.define("PF.view.Main", {
        extend:"Ext.NavigationView",
        xtype:"mainview",
        config:{
            items:[
            {
                xtype:'panel',
                id:'mainViewPanel',
                title:'Pizza Finder',
                layout:'vbox',
                items:
                [
                    {
                        xtype:'formpanel', // Has to be FormPanel for iOS to show "Search"
                        id:'singleLineAddressPanel',
                        standardSubmit:false, // Neither of these stop the form submitting
                        submitOnAction:false, // Neither of these stop the form submitting
                        left:10,
                        right: 10,
                        top:10,
                        height:57, // Have to add this if I make this a FormPanel
                        scrollable:false,
                        padding:0,
                        centered: true,
                        hidden: true,
                        modal: true,
                        hideOnMaskTap: true,
                        hideAnimation: 'fadeOut',
                        items:
                        [
                            {
                                xtype:'searchfield',
                                id:'singleLineAddress',
                                value:'222 Mason Street, San Francisco',
                                padding:0,
                                listeners: {
                                    action: function(c,e,o) {
                                        c.up('#singleLineAddressPanel').hide();
                                        return false;
                                    },
                                    clearicontap: function(c,e,o) {
                                        // The keyboard hides on the iPhone when you click clear.
                                        // That's not like native behaviour.
                                        c.focus();
                                        return false;
                                    }                            
                                }
                            }
                        ],
                        zIndex:'40'
                    },
                    {
                        xtype:'toolbar',
                        docked:'bottom',
                        defaults:{flex:1},
                        items:[
                        {
                            xtype: 'button',
                            text:'Address',
                            handler: function() {
                                var enterAddressBox = this.up('#mainViewPanel').down('#singleLineAddressPanel'); // p.getComponent('singleLineAddressPanel');
                                enterAddressBox.show();
                                enterAddressBox.getComponent('singleLineAddress').focus();
                            }
                        }
                        ]
                    }
                ]
            }]
        }
    });

HELPFUL INFORMATION




See this URL for live test case: http://geeknixta.com/demo/pizzafinder/


Debugging already done:

• Have pulled out all other code.
• Have tried to set focus explicitly on the show event of the formpanel and the search field (search field's show event seems not to fire).
• Have tried to set the searchfield as the active item on the formpanel.

Operating System:

• iOS 5.1

[Jamie Avins]

Have you rebuilt your css with compass wince upgrading to 2.0.1RC?

[nixta]

Hi Jamie,

Had no idea I might need to do that

I took the 2.0 SDK, was given a very bare-bones sample app, modified the resources/css/app.css file slightly, and then pointed to the 2.0.1-rc SDK.

So far in my 3.5 weeks of Sencha I haven't touched compass. I'll try to do that now and will let you know.

Thanks,

Nick.

[nixta]

Hi Jamie,

Recompiling doesn't help.

n

[Jamie Avins]

Ok, we'll take a look at it.

[celwell]

I have same problem. Not working in Chrome or Safari. Tried many different ways / listeners to call the focus from. i could only get it to focus when I set the blur event to cause the focus() and then when I blur it it refocuses, which is good, but can't get that to happen upon painted or show or similar listeners.

[davide.cecconi]

HI,
I have some problem with set focus on textfield , I have open a Ticket also


I hope this problem will be solve soon
Thanks
Davide

[davide.cecconi]

Problem is CSS, if I will comment css file in index.html I resolve the problem, focus work

... but the page/program is without css and It is unusable... of course (but focus work) :-)

[celwell]

are you referring to Chrome or what?

[davide.cecconi]

Hi,
I refer to iOS system
In androdi or Chrome or Safari desktop browser (MAC) I haven't problem

The problem is focus on iOS sytem... no Emulator but with real device (IPAD,IPHONE)