PDA

View Full Version : [OPEN] Cannot set focus to searchfield in iOS



nixta
16 Apr 2012, 10:51 AM
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
16 Apr 2012, 11:41 AM
Have you rebuilt your css with compass wince upgrading to 2.0.1RC?

nixta
16 Apr 2012, 11:45 AM
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
16 Apr 2012, 12:15 PM
Hi Jamie,

Recompiling doesn't help.

n

Jamie Avins
16 Apr 2012, 2:39 PM
Ok, we'll take a look at it.

celwell
1 May 2012, 10:05 PM
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
5 Jun 2012, 2:02 AM
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
6 Jun 2012, 12:25 AM
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
6 Jun 2012, 10:34 AM
are you referring to Chrome or what?

davide.cecconi
7 Jun 2012, 2:10 AM
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)

rdougan
10 Jul 2012, 1:13 PM
Are you able to produce a simple test case? I put a button and search field into a simple application and it works as expected on iOS (real device).

ronan quillevere
11 Oct 2012, 6:56 AM
Hello,

I faced the same problem: not able to focus a searchfield on safari mobile iOS (5) with ST 2.0.1

Here is a link to the example to test (working on chrome : may need a refresh the first time but nerver working on safari mobile on my iphone) :
production build : http://focusst.staticloud.com/
testing build + delay : http://focusdelay.staticloud.com/ (http://focusst2.staticloud.com/)

Here is the code app .

1) I simply created an app called focus with the command tools

Here is the main view code



Ext.define("focus.view.Main", {
extend: 'Ext.Container',
requires: [
'Ext.Toolbar',
'Ext.field.Search'
],
config: {
id:'mainView',
items: [
{
xtype : 'searchfield',
id : 'searchfield',
placeHolder : 'search'
}
]
}
});


here is the app.js code



Ext.application({
name: 'focus',


requires: [
'Ext.MessageBox'
],


views: ['Main'],


icon: {
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/Icon@2x.png',
'144': 'resources/icons/Icon~ipad@2x.png'
},


isIconPrecomposed: true,


startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},


launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();


// Initialize the main view
var view = Ext.create('focus.view.Main');
view.on({
painted : function(){Ext.getCmp('searchfield').focus();}
});
Ext.Viewport.add(view);
},


onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function(buttonId) {
if (buttonId === 'yes') {
window.location.reload();
}
}
);
}
});


I also tried to add a delayed task to get the focus but it did not help


Here is the app.js with delay




Ext.application({
name: 'focus',


requires: [
'Ext.MessageBox',
'Ext.util.DelayedTask'
],


views: ['Main'],


icon: {
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/Icon@2x.png',
'144': 'resources/icons/Icon~ipad@2x.png'
},


isIconPrecomposed: true,


startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},


launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();


// Initialize the main view
var view = Ext.create('focus.view.Main');
view.on({
painted : function(){
var task = Ext.create('Ext.util.DelayedTask', function() {
Ext.getCmp('searchfield').focus();
});


task.delay(10000);
}
});
Ext.Viewport.add(view);
},


onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function(buttonId) {
if (buttonId === 'yes') {
window.location.reload();
}
}
);
}
});

TommyMaintz
16 Apr 2013, 7:48 AM
Unfortunately on iOS it seems that you can only call focus on a field inside of a touch event handler. Calling it anywhere else seems to do nothing. I'm closing this ticket as wont fix unless anyone has found a way around this.

P.s. This issue also existed on 2.0.0 an any previous version of Touch.

Darly
23 Sep 2013, 6:42 AM
Hey TommyMaintz,
Can you please elaborate on this solution or give an example on how to call focus within an touch event handler?